javascript：在dom中查找字符串并强调它_Javascript_Dom

javascript：在dom中查找字符串并强调它

javascript dom

javascript：在dom中查找字符串并强调它,javascript,dom,Javascript,Dom,我想要一个函数，它可以在DOM中的数组中找到一些字符串，并对其进行强调例如我是linux的超级粉丝，目前我正在使用suse pro，并发现它非常棒。我如何用最简单的方法来做。提前谢谢编辑：我发现了一个非常简单的方法来完成这个：jquery高亮插件！干杯这可能是最简单的方法，但可能不是最好的方法：（向下滚动到底部，上面写着“Replace Function:Global Regular Expression” 你可以用linux等来替换linux。我几个月前不得不这么做。最初有人按

我想要一个函数，它可以在DOM中的数组中找到一些字符串，并对其进行强调

例如


我是linux的超级粉丝，目前我正在使用suse pro，并发现它非常棒。

我如何用最简单的方法来做。提前谢谢

编辑：我发现了一个非常简单的方法来完成这个：jquery高亮插件！干杯

这可能是最简单的方法，但可能不是最好的方法：（向下滚动到底部，上面写着“Replace Function:Global Regular Expression”

你可以用

linux

等来替换

linux

。

我几个月前不得不这么做。最初有人按照其他人的建议使用innerHTML的字符串操作，但这条路会导致疯狂。棘手的情况是：如果标记的关键字是元素的类名或id怎么办。我们也不知道“我不想破坏任何嵌入式javascript并意外导致无效标记。还需要处理嵌入式css样式。最终，您将为HTML4.0+ECMAscript+css编写一个文本解析器，即使在有限的情况下，这也是一项大量工作-它正在用javascript编写您自己的web浏览器

但是我们在web浏览器中已经有了一个HTML+JS+CSS解析器，可以为我们生成一个漂亮的DOM树。因此我决定使用它。这就是我最后想到的：

keywords = ['hello world','goodbye cruel world'];
function replaceKeywords (domNode) {
    if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
        var children = domNode.childNodes;
        for (var i=0;i<children.length;i++) {
            var child = children[i];

            // Filter out unwanted nodes to speed up processing.
            // For example, you can ignore 'SCRIPT' nodes etc.
            if (child.nodeName != 'EM') {
                replaceKeywords(child); // Recurse!
            }
        }
    }
    else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
        var text = domNode.nodeValue;

        // This is another place where it might be prudent to add filters

        for (var i=0;i<keywords.length;i++) {
            var match = text.indexOf(keywords[i]); // you may use search instead
            if (match != -1) {
                // create the EM node:
                var em = document.createElement('EM');

                // split text into 3 parts: before, mid and after
                var mid = domNode.splitText(match);
                mid.splitText(keywords[i].length);

                // then assign mid part to EM
                mid.parentNode.insertBefore(em,mid);
                mid.parentNode.removeChild(mid);
                em.appendChild(mid);
            }
        }
    }
}

keywords=[“你好世界”，“再见残酷世界]；
函数替换关键字（domNode）{
如果（domNode.nodeType==Node.ELEMENT\u Node）{//我们只想扫描html元素
var children=domNode.childNodes；
对于（var i=0；i，有一个jquery插件可以做到这一点：
我觉得有更好的方法。这只是我想到的第一件事。有点像（来自同一个人）的复制品，除了这个问题是问如何在PHP中实现这一点，而这个问题是问如何在Javascript中实现这一点。但它不是复制品。它有两种不同的语言：）我应该用什么替换domNode？我在div中有一个id为的文本。@unknown您可以调用它作为replaceKeywords（document.getElementById（“someid”））
@slebetman您可能想用Node.ELEMENT\u Node
和Node.TEXT\u Node
替换1
和3
常量，以提高清晰度。@Brian可以这样做。对于处理整个文档，您也可以将其称为replaceKeywords（document.body）
忽略“EM”的筛选器将阻止它处理已处理的文本。请注意，节点
在Internet Explorer中至少在版本8（未测试9）之前未定义。我只是定义了所需的常量，如果它们尚未用作示例。我遇到了“INDEX\u SIZE\u ERR:DOM异常1”行var mid=domNode.splitText（匹配）；
。我不知道为什么，也没有时间正确地解决这个问题。作为一个快速解决方法，我只是在该部分周围放了一个if
语句，条件是match
。这似乎没有什么不良影响。但我不相信这个解决方案。
<body>
    im a huge fan of <em>linux</em> and at the moment im using <em>suse pro</em> and finds it amazing.
</body>

keywords = ['hello world','goodbye cruel world'];
function replaceKeywords (domNode) {
    if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
        var children = domNode.childNodes;
        for (var i=0;i<children.length;i++) {
            var child = children[i];

            // Filter out unwanted nodes to speed up processing.
            // For example, you can ignore 'SCRIPT' nodes etc.
            if (child.nodeName != 'EM') {
                replaceKeywords(child); // Recurse!
            }
        }
    }
    else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
        var text = domNode.nodeValue;

        // This is another place where it might be prudent to add filters

        for (var i=0;i<keywords.length;i++) {
            var match = text.indexOf(keywords[i]); // you may use search instead
            if (match != -1) {
                // create the EM node:
                var em = document.createElement('EM');

                // split text into 3 parts: before, mid and after
                var mid = domNode.splitText(match);
                mid.splitText(keywords[i].length);

                // then assign mid part to EM
                mid.parentNode.insertBefore(em,mid);
                mid.parentNode.removeChild(mid);
                em.appendChild(mid);
            }
        }
    }
}