Question

在HTML文档中突出显示搜索的pharase的最佳方法是什么。

我将完整的HTML文档作为变量中的大字符串。我想用标签突出显示搜索的术语，不包括文本。

例如，如果用户搜索“img”，则应忽略img标记应突出显示文本中的短语“img”。

Answer 1

不要使用正则表达式。

因为正则表达式无法解析HTML（甚至接近），所以任何试图弄乱HTML字符串中匹配单词的行为都有可能破坏标记中出现的单词。一个实施不当的HTML正则表达式黑客攻击甚至可以让你留下HTML注入漏洞，攻击者可以利用这些漏洞来进行跨站点脚本编写。

相反，您应该解析HTML并仅对文本内容进行搜索。

如果您可以接受在客户端添加JavaScript突出显示的解决方案，这非常简单，因为浏览器已经将HTML解析为您可以操作的一堆DOM对象。见例如。 this question用于客户端示例。

如果你必须使用PHP，这有点棘手。简单的解决方案是使用DOMDocument::loadHTML，然后将上面示例中的findText函数转换为PHP。至少使用的DOM方法是标准化的，因此它们的工作方式相同。

Answer 2

编辑：之前标记为Java，因此这个答案可能不适用。

这很快又脏，但它可能适合你，或者至少是一个起点

private String highlight(String search,String html) {
    return html.replaceAll("(>[^<]*)("+search+")([^>]*<)","$1<em>$2</em>$3");
}

这需要测试，我不保证其正确但最简单的方式来解释如何确保您的术语存在于两个标记之间，因此它本身不是标记或标记参数的一部分。

Answer 3

var highlight = function(what){
   var html  = document.body.innerHTML,

       word  = "(" + what + ")",
       match = new RegExp(word, "gi");

   html = html.replace(match, "<span style='background-color: red'>$1</span>");

   document.body.innerHTML = html;
};

highlight('ll');

这将突出显示任何“ll”。

通过highlight()或<或任何>致电tag name小心，它也会取代那些，搞砸了你的标记。您可以通过阅读innerText而不是innerHTML来解决此问题，但这样会丢失标记信息。

最好的方法可能是自己实现一个解析器例程。

示例：http://www.jsfiddle.net/DRtVn/

Answer 4

有一个免费的JavaScript库可能会帮助你 - ＆gt; http://scott.yang.id.au/code/se-hilite/

Answer 5

您必须使用某种服务器端语言在网页上呈现搜索结果。

所以我能想到的最好的方法是在使用服务器端语言本身（可能是php，java或任何其他语言）渲染时强调单词。

这样你只有没有html的结果字符串，也没有解析开销。

文本搜索 - 突出显示搜索短语

5 个答案: