对元素中的所有文本应用正则表达式

Question

我正在尝试使用 JS 将特定单词动态替换为某个 HTML 元素中的链接。我想我会使用一个简单的正则表达式：

var regEx = new RegExp('\\b'+text+'\\b', 'gi');

在上下文 div 的 innerHTML 属性上应用正则表达式替换的快速'n'nasty 方式：

context.innerHTML = context.innerHTML.replace(regEx, '<a href="#">'+text+"</a>");

这样做的问题是它也适用于图像标题，从而破坏了页面的布局。我希望它仅适用于页面的文本，如果可能的话还排除标题标签，当然还有 HTML 注释等。

所以我尝试了类似的方法，但它似乎根本不起作用：

function replaceText(context, regEx, replace) {
    var childNodes = context.childNodes;
    for (n in childNodes) {
        console.log(childNodes[n].nodeName);
        if (childNodes[n] instanceof Text) {
            childNodes[n].textContent = childNodes[n].textContent.replace(regEx, replace);
        } else if (childNodes[n] instanceof HTMLElement) {
            replaceText(childNodes[n], regEx, replace);
            console.log('Entering '+childNodes[n].nodeName);
        } else {
            console.log('Skipping '+childNodes[n].nodeName);
        }
    }
}

谁能看到我做错了什么，或者想出一个更好的解决方案？谢谢！

更新：

这是context 的内容可能是什么样子的sn-p：

<h4>Newton's Laws of Motion</h4>
<p><span class="inline_title">Law No.1</span>: <span class="caption">An object at rest will remain at rest, and an object in motion will continue to move at constant velocity, unless a net force is applied.</span></p>
<ul>Consequences: <li>Conservation of Momentum in both elastic and inelastic collisions</li>
<li>Conservation of kinetic energy in elastic collisions but not inelastic.</li>
<li>Conservation of angular momentum.</li>
</ul>
<h5>Equations</h5>
<p class="equation">&rho; = mv</p>
<p>where &rho; is the momentum, and m is the mass of an object moving at constant velocity v.</p>

Answer 1

你可以用这个：

function replaceText(context, regEx, replace)
{
    var childNodes = context.childNodes;
    for (var i = 0; i<childNodes.length; i++) {
        var childNode = childNodes[i];
        if (childNode.nodeType === 3) // 3 is for text node
            childNode.nodeValue = childNode.nodeValue.replace(regEx, replace);
        else if (childNode.nodeType === 1 && childNode.nodeName != "HEAD")
            replaceText(childNode, regEx, replace); 
    }
}
replaceText(context, /cons/ig, 'GROUIK!');

这个想法是在“上下文”DOM树中找到所有文本节点，这就是我使用递归函数来搜索子节点内的文本节点的原因。

注意：我在函数中测试childNode.nodeName != "HEAD"。这只是避免使用特定标签的示例。在现实生活中，将 body 节点作为参数传递给函数更简单。

Answer 2

据我了解，您正在尝试替换 innerHTML 中但在 tags 内的文本。

首先我尝试使用innerText 而不是innerHTML，但它没有给出预期的结果。后来我找到了@Alan Moore 的answer 和 Negative Lookahead regex 之类的

(?![^<>]*>)

可用于忽略标签<> 中的文本。这是我的方法

var regEx = new RegExp("(?![^<>]*>)" + title, 'gi');
context.innerHTML = context.innerHTML.replace(regEx, '<a href="#">'+text+"</a>");

这是一个示例JSFiddle