3

我正在编写一个在指定的“#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 的全部内容？

4

3 回答 3

6

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

是的。这是 jQuery 并没有真正为您提供太多的（少数）地方之一。

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

这是一个示例：Live copy | 来源

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情况，而不在父元素的开头创建空文本节点。（无害，但不太理想。）
  • 处理单词位于父级末尾的情况，这样您就不会在那里得到一个空的文本节点。（再次。）
于 2012-04-23T16:24:59.080 回答
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);
}

用法

search("keyword");

​​</p>

演示

于 2012-04-23T16:39:16.933 回答
0

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

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

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

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

于 2012-04-23T16:25:18.780 回答