如何使用Javascript包装匹配的字符串而不终止现有事件？_Javascript_Html_Regex

如何使用Javascript包装匹配的字符串而不终止现有事件？

javascript html regex

如何使用Javascript包装匹配的字符串而不终止现有事件？,javascript,html,regex,Javascript,Html,Regex,使用香草Javascript，我试图用锚来替换页面上显示的任何文本，除非它已经在锚中。但我不想扼杀现有的事件。例如，这个： <body> <p>The text I want to replace is awesomeness. Whatever has awesomeness should be replaced. Unless it is <a href="#" class="existingLink">an awesomeness link</a&

使用香草Javascript，我试图用锚来替换页面上显示的任何文本，除非它已经在锚中。但我不想扼杀现有的事件。例如，这个：

<body>
<p>The text I want to replace is awesomeness. Whatever has awesomeness should be replaced. Unless it is <a href="#" class="existingLink">an awesomeness link</a>.</p>
</body>


我想替换的文本是令人惊叹的。任何令人敬畏的东西都应该被取代。除非是这样

…应该是这样的：

<body>
<p>The text I want to replace is <a href="/coolness/">awesomeness</a>. Whatever has <a href="/coolness/">awesomeness</a> should be replaced. Unless it is <a href="#" class="existingLink">an awesomeness link</a>.</p>
</body>


我要替换的文本是。任何已经发生的事情都应该被替换。除非是这样

但是，任何已分配给（例如）现有链接的onclick、onmouseover或onanything事件都应该保留。我尝试替换

标记的innerHTML，但这会终止分配给existingLink的事件。不过，我似乎想不出任何其他方法来进行转换。这方面的工作是由我们来完成的。我正在尝试做一些类似于reftagger所做的事情（只是在一个小得多的层面上）。一个超级简单的例子将非常有用

提前谢谢

您需要将regex与一起使用。请参见下面的示例，这基本上就是您要做的。

设置

元素的innerHTML
将替换其所有子节点和附加到它们的任何事件侦听器。因此，您需要迭代子节点
，并将包含搜索项的任何文本节点替换为一系列由锚元素
分隔的子节点
这有点棘手，所以您可能需要查找一个库。但是，下面的代码是普通的JavaScript，它解决了您的问题。（在Chrome和Firefox中测试的显示事件侦听器被保留。）
var搜索_TERM='awesomeness'；
var mungeChildNodes=函数（elem）{
//（*）请注意nodes.length是可变的，我们希望它会随着时间的推移而变化
//迭代，因为我们正在添加和删除节点。我们需要付费
//注意j的值以避免无限循环。
对于（var j=0；j0），您需要操作文本节点。这并不能解决问题，因为在元素上设置innerHTML，会销毁（是否可以销毁？）其子元素以及附加到它们的任何事件侦听器。谢谢sjy。这非常有帮助。
var SEARCH_TERM = 'awesomeness';
var mungeChildNodes = function(elem) {
    // (*) Note that nodes.length is mutable and we expect it to change as we
    // iterate, because we're adding and removing nodes. We need to pay
    // attention to the value of j to avoid an infinite loop.
    for (var j=0; j<elem.childNodes.length; j++) {
        var node = elem.childNodes[j];

        // If the current node is a text node,
        if (node.nodeType === 3) {
            // Split it into a bunch of text chunks delimited by the search term.
            var chunks = node.data.split(SEARCH_TERM);
            // Now, for each chunk of text...
            for (var k=0; k<chunks.length; k++) {
                // make it into a DOM node
                var newNode = document.createTextNode(chunks[k]);
                // and add it before the original node.
                elem.insertBefore(newNode, node);
                j = j + 1; // (*)
                // Then, (don't do this next bit for the last chunk)
                if (k<chunks.length - 1) {
                    // create a link containing the search term
                    var link = document.createElement('a');
                    link.setAttribute('href', '#foo');
                    link.innerHTML = SEARCH_TERM;
                    // and add the link before the original node, too.
                    elem.insertBefore(link, node);
                    j = j + 1; // (*)
                }
            } // Move to the next text chunk.

            // Remove the original node.
            elem.removeChild(node);
            j = j - 1; // (*)

        // Recurse into subnodes, too, unless the node is a link.
        } else if (node.childNodes.length > 0 && node.tagName !== 'A') {
            mungeChildNodes(node);
        }
    }
}