使用javascript在文本中插入链接而不替换div的整个内容 [英] Using javascript to insert links in text WITHOUT replacing entire content of div

问题描述

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

I'm writing a widget that searches for specific keywords in a specified "#content" div.

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

Here is how I set it up originally using jQuery (simplified version):

• 设置一个等于内容html的变量： var content = $（'content'）。html（）;


• 使用一些正则表达式替换某些关键字< a href ='link.html'>关键字< / a>


• 用新内容替换内容div的html： $（'content'）。html（content）;

• set a variable equal to the html of the content: var content = $('content').html();
• use some regexes to replace certain keywords with <a href='link.html'>keyword</a>
• replace the html of the content div with the new content: $('content').html(content);

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

This works for the most part, but the problem occurs when the "#content" div contains javascript. When I set $('content').html(content), it re-runs any javascript code contained in the $('content') div, which can cause errors. Since this is a widget that I'm writing to work on any site, I don't have control over the content div, and whether there will be any javascript in it.

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

My questions is, is there a way to replace JUST the keywords with <a href='link.html'>keyword</a>, WITHOUT replacing the entire content of the div?

推荐答案

我的问题是，有没有办法取代JUST关键字< a href ='link.html'>关键字< / a> ，无需替换div的全部内容？

My questions is, is there a way to replace JUST the keywords with <a href='link.html'>keyword</a>, WITHOUT replacing the entire content of the div?

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

Yes. It's one of the (few) places where jQuery doesn't really offer you much.

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

Down at the raw DOM API level, though, the Text node containing the actual text of the element has a splitText function with which you can split the node into two adjacent nodes at a specific location. So in your case, you'd split at the beginning of the word and then again after the end of it, then wrap that middle Text node in a new anchor.

以下是一个例子：实时副本 | 来源

Here's an example: Live copy | source

HTML：

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

JavaScript：

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

});

当然，您需要做一些改进的事情：

Naturally there are some things you'd want to do to improve that:

• 处理索引=== 0 案例而不在父元素的开头创建空文本节点。 （无害，但不太理想。）


• 处理单词位于父级的 end 的情况，所以你不会在那里得到一个空的文本节点。 （再次。）

• Handle the index === 0 case without creating an empty text node at the beginning of the parent element. (Harmless, but less than ideal.)
• Handle the case where the word is at the very end of the parent, so you don't end up with an empty text node there. (Again.)

这篇关于使用javascript在文本中插入链接而不替换div的整个内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！