在 HTML 文本之后添加锚点答案

【问题标题】：Adding anchor after HTML text在 HTML 文本之后添加锚点
【发布时间】：2019-03-06 04:29:01
【问题描述】：

我正在开发一个 chrome 扩展以获得一些乐趣，我正在页面中搜索一些常量数组中的一些文本。为了实现这一点，我在页面上使用文本获取所有元素，然后循环遍历我的常量数组和节点数组（我对性能有点不满意......）。找到匹配项后，我想在文本之后添加一个执行操作的锚点。

例如，"target" 是我要查找的单词：

<p>You should really find the target better!</p>

我希望它以这样的方式结束：

<p>You should really find the target<a attr-name="target"> +</a> better!</p>

我尝试了几种技术，我尝试insertAdjacentElement，虽然在这种情况下它不起作用，因为元素是段落，而不是目标文本，所以它只是将锚添加到末尾段落。

我也试过用 innerHTML 插入它，虽然它看起来有点不稳定，尤其是在其他扩展正在执行 DOM 操作时。

有什么想法吗？

【问题讨论】：

I've also tried just inserting it with innerHTML 这可能是正确的做法，而且很简单，你为什么不想呢？
我有点反对，因为你不能设置事件监听器。尽管我使用 innerHTML 添加了它，然后再次查询选择器以获取我添加的类列表，并且能够以这种方式添加事件侦听器。我似乎仍然错过了一些，虽然不知道为什么。这是另一个问题。我也觉得应该有一种更干净的方式来做，但我想改变 DOM，这是一种很常见的方式。
见TextNode.splitText() 和那里的例子。

标签： javascript html dom google-chrome-extension

【解决方案1】：

在锚点的情况下，你需要添加 href 必须属性来像这样的链接

<p>You should really find the target<a href="#" attr-name="target"> +</a> better!</p>

我希望这就是你要找的..

谢谢

【讨论】：

这甚至不是远程回答问题的尝试。请改为发表评论

【解决方案2】：

function walkText(node) {
  if (node.nodeType == 3) {
    node.data = node.data.replace(/target/g, 'target<a href="#" attr-name="target"> +</a>');
  }
  if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
    for (var i = 0; i < node.childNodes.length; i++) {
      walkText(node.childNodes[i]);
    }
  }
}
walkText(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
</body>

你可以使用replace() 函数来做这件事。这是一个例子。

var str = "<p>You should really find the target better!</p>";
var res = str.replace("target", 'target<a href="#" attr-name="target"> +</a>');

这一定对你有用

【讨论】：

【解决方案3】：

我希望这是您正在寻找的结果？

function walkText() {
  document.body.innerHTML = document.body.innerHTML.replace(/target/g, 'target <a attr-name="target"> +</a>');
}
walkText(document.body);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
<div class="test"><p>You should really find the target better!</p></div>
</body>

【讨论】：