代码之家  ›  专栏  ›  技术社区  ›  Anthony Atmaram

javascript正则表达式

  •  0
  • Anthony Atmaram  · 技术社区  · 14 年前

    对于我正在处理的快速“搜索并突出显示”脚本,有一个小问题。我使用正则表达式是因为我想在加载文档后在客户端进行搜索。我的搜索/突出显示功能如下:

    function highlight(word, colour, container) {
        var regex = new RegExp("(>[^<]*?)(" + word + ")", "ig");
        var replace = "$1<span name='searchTerm' style='background-color: " + colour + "'>$2</span>";
    
        if (regex.exec(container.innerHTML)) {
            container.innerHTML = container.innerHTML.replace(regex, replace);
            return true;
        }
        return false;
    }
    

    word 是要搜索的词, colour 是突出它的颜色吗? container 是要搜索的元素。

    考虑包含此内容的元素:

    <ul>
        <li>Set the setting to the correct setting.</li>
    </ul>
    

    假设我将单词“set”传递给了highlight函数。在当前状态下,由于懒惰的重复,它只找到set的第一个实例。

    如果我把regex改成这个呢:

    var regex = new RegExp("(>[^<]*?)?(" + word + ")", "ig");
    

    这现在非常有效,它突出显示了字符串“set”的所有实例。但是如果我传递搜索词“li”,它将替换标签中的文本!

    有没有一个快速修复这个正则表达式以获得我想要的行为?我需要它替换搜索字符串的所有实例,但不替换作为标记一部分找到的实例。我想让它客户端使用regex。

    谢谢!

    1 回复  |  直到 14 年前
        1
  •  6
  •   Community rohancragg    7 年前

    You shouldn't be using regex to parse HTML . 正确地浏览DOM树,并对纯文本进行搜索和替换。

    顺便说一下,有一个jquery插件可以满足您的需要;您可以使用它或查看它来了解如何执行它:
    http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html