Question

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

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

设置一个等于内容html的变量：var content = $('content').html();
使用一些正则表达式将某些关键字替换为<a href='link.html'>keyword</a>
将内容div的html替换为新内容：$('content').html(content);

这大部分都有效，但当“#content”div包含javascript时会出现问题。当我设置$('content').html(content)时，它会重新运行$('content') div中包含的任何javascript代码，这可能会导致错误。由于这是我写在任何网站上工作的小部件，我无法控制内容div，以及是否会有任何javascript。

我的问题是，有没有办法用<a href='link.html'>keyword</a>取代关键字，而不用替换整个div的内容？

Answer 1

我的问题是，有没有办法用<a href='link.html'>keyword</a>取代关键字，而不用替换整个div的内容？

是。它是jQuery并不能为你提供很多东西的少数几个地方之一。

在原始DOM API级别下，包含元素实际文本的Text node具有splitText function，您可以使用该Live copy将节点拆分为特定位置的两个相邻节点。因此，在您的情况下，您将在单词的开头拆分，然后在结束之后再拆分，然后将该中间Text节点包装在新锚中。

以下是一个例子：source | {{3}}

HTML：

<input type="button" id="theButton" value="Make it a link">
<p id="example">This is the example paragraph.</p>

JavaScript的：

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);
    }
  });

});

当然，有些事情你想做些改进：

处理index === 0案例而不在父元素的开头创建空文本节点。 （无害，但不太理想。）
处理单词位于父级的 end 的情况，因此您不会在那里以空文本节点结束。 （再一次）

Answer 2

您只能替换关键字而不替换所有内容，

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);
}

<强> USAGE

search("keyword");

DEMO

Answer 3

是的，但您必须手动遍历所有文本节点。

首先剥离<script>标签要容易得多，因为一旦它们被运行，页面上就不需要它们了（一切都保存在内存中）。

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

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

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

3 个答案: