仅在父节点中的 HTML 元素中获取文本的最佳方法答案

【问题标题】：Best way to pick up text in a HTML element that is in the parent node only仅在父节点中的 HTML 元素中获取文本的最佳方法
【发布时间】：2009-10-20 12:52:13
【问题描述】：

例如，我有这样的标记

<div id="content">
    <p>Here is some wonderful text, and here is a <a href="#">link</a>. All links should have a `href` attribute.</p>
</div>

现在我希望能够对 p 元素内的文本执行一些正则表达式替换，但不是在任何 HTML 中，即能够匹配反引号内的 href，但不能匹配锚元素内的内容。

我考虑过正则表达式，但普遍认为，我不应该使用它们来解析 HTML。

我目前这样做的方法是这样的：我在一个数组中有一堆单词，我正在循环它们并像这样创建一个数据对象：

termsData[term] = {
       regex: new RegExp('(\\b' + term + '\\b)', 'gmi'),
       replaceWith:  '<span>{TERM}</span>'
    };

然后我再次循环遍历它，像这样进行替换：

var html = obj.html();

$.each(terms, function(i, term) {


     // Replace each word in the HTML with the span
     html = html.replace(termsData[term].regex, termsData[term].replaceWith.replace(/{TERM}/, '$1'));


 });

 obj.html(html);

现在我昨晚在一个不敬虔的时间做了很多这样的事情，将它复制并粘贴到这里似乎让人觉得我应该重构其中的一些。

所以你应该可以看出，我希望能够替换纯文本，而不是 HTML 标记内的任何内容。

最好的方法是什么？

注意：源代码来自here，如果您想要更好的外观。

【问题讨论】：

标签： javascript jquery html regex

【解决方案1】：

你不想用正则表达式处理 HTML 是对的。分配大量 .html() 也是一个坏消息；除了序列化和重新解析大量 HTML 的性能缺陷之外，您还会丢失不可序列化的数据，例如事件侦听器、表单数据和 JS 属性/引用。

查看this answer 中的findText 函数并调用类似的东西（假设 obj 是要搜索的最顶层节点上的 jQuery 包装器）：

findText(obj[0], /\b(term1|term2|term3)\b/g, function(node, match) {
    var span= document.createElement('span');
    node.splitText(match.index+match[0].length);
    span.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

【讨论】：