使用javascript在文本中插入链接而不替换div的全部内容

我正在编写一个小部件，在指定的“#content”div中搜索特定关键字

以下是我最初使用jQuery（简化版）进行设置的方式：

• 设置一个等于内容html的变量：

  var content=$（'content'）.html（）

• 使用一些正则表达式将某些关键字替换为

• 将content div的html替换为新内容：

  $（'content'）.html（content）

这在很大程度上是可行的，但是当“#content”div包含javascript时，问题就会出现。当我设置

$（'content'）.html（content）

时，它会重新运行

$（'content'）

div中包含的任何javascript代码，这可能会导致错误。因为这是一个我为在任何网站上工作而编写的小部件，所以我无法控制content div，也无法控制其中是否会有javascript

我的问题是，有没有一种方法可以仅用

替换关键字，而不替换div的全部内容

我的问题是，有没有一种方法可以仅用

替换关键字，而不替换div的全部内容

对。这是jQuery没有真正为您提供太多功能的（为数不多的）地方之一

但是，在原始domapi级别，包含元素实际文本的具有一个属性，您可以使用该属性将节点拆分为特定位置的两个相邻节点。因此，在您的例子中，您需要在单词的开头拆分，然后在单词的结尾再次拆分，然后将中间的

Text

节点包装到一个新的锚点中

这里有一个例子：|

HTML:

当然，您需要做一些事情来改善这一点：

• 处理

  索引===0

  大小写，而不在父元素的开头创建空文本节点。（无害，但不太理想。）
• 处理单词位于父级末尾的情况，这样就不会在那里出现空文本节点。（再说一遍。）

---

是，但您必须手动循环所有文本节点

首先剥离

标记要容易得多，因为一旦它们被运行，页面上就不需要它们了（所有内容都保存在内存中）

---

这将从

#content

元素中删除脚本，然后您可以毫无问题地运行现有的替换代码。

您可以只替换关键字，而不替换所有类似的内容

function keywordconvert(str, p1, offset, s)  {
      return "<a href=\"link?t="+encodeURIComponent(p1)+"\">"+p1+"</a>";
}

function search(keyword) {
   var content = document.getElementById("content");
   var re = new RegExp("("+keyword+")","g");
  content.innerHTML = content.innerHTML.replace(re, keywordconvert);
}

​​

---

谢谢，T.J.这正是我想要的@卡波诺：很好，很高兴这有帮助。

jQuery(function($) {

  $("#theButton").click(function() {
    var targetWord, p, textNode, index, nodeWord, nodeAfter;

    // Our target word
    targetWord = "example";

    // Get the paragraph using jQuery; note that after we
    // use jQuery to get it (because it fixes getElementById for
    // us on older versions of IE), we then use [0] to access
    // the *raw* `p` element.
    // Then get the text node from it.
    p = $("#example")[0];
    textNode = p.firstChild;

    // Find our text in the text node
    index = textNode.nodeValue.indexOf(targetWord);
    if (index !== -1) {
      // Split at the beginning of the text
      nodeWord = textNode.splitText(index);

      // Split the new node again at the end of the word
      nodeAfter = nodeWord.splitText(targetWord.length);

      // Insert a new anchor in front of the word
      anchor = document.createElement('a');
      anchor.href = "http://stackoverflow.com";
      p.insertBefore(anchor, nodeWord);

      // Now move the word *into* the anchor
      anchor.appendChild(nodeWord);
    }
  });

});

$('#content script').remove();

function keywordconvert(str, p1, offset, s)  {
      return "<a href=\"link?t="+encodeURIComponent(p1)+"\">"+p1+"</a>";
}

function search(keyword) {
   var content = document.getElementById("content");
   var re = new RegExp("("+keyword+")","g");
  content.innerHTML = content.innerHTML.replace(re, keywordconvert);
}

search("keyword");