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

在HTML文档中突出显示Searched语句的最佳方式是什么？文本搜索 - 突出显示搜索短语

我已经完成HTML文档作为变量中的大字符串。而且我想突出显示搜索到的术语，不包含带有标签的文本。

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

2010-08-26 user160820

你的意思是在用户浏览器中？如果是这样，这是一个纯粹的JavaScript问题，应该重新标记 – Riduidel 2010-08-26 09:06:59

据我了解，这是关于JavaScript，而不是Java和编程语言 - > retagged。 – atamanroman 2010-08-26 09:19:49

不要使用正则表达式。

由于正则表达式无法解析HTML（甚至无法逼近），任何试图弄乱HTML字符串中的匹配单词的尝试都有可能会破坏出现在标记中的单词。一个执行得不好的HTML正则表达式攻击甚至可能使您面临HTML注入漏洞，攻击者可能利用这些漏洞进行跨站点脚本编写。

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

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

如果你必须用PHP来处理它，那会更棘手。简单的解决方案是使用DOMDocument::loadHTML，然后将上述示例中的findText函数转换为PHP。至少使用的DOM方法是标准化的，所以它们的工作原理是相同的。

来源

2010-08-26 10:22:53 bobince

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

这是快速和肮脏的，但它可能为你工作，或者至少是一个起点

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

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

来源

2010-08-26 09:16:30 BjornS

JavaSCRIPT，而不是Java;）编辑：啊，我看到你被标签'java'弄糊涂了。 – Lekensteyn 2010-08-26 09:20:13

是的，我保持答案，因为正则表达式至少是相关的:) – BjornS 2010-08-26 09:25:21

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/

来源

2010-08-26 09:29:24 jAndy

有一个免费的JavaScript库，可以帮助你 - >http://scott.yang.id.au/code/se-hilite/

来源

2010-08-26 10:25:28 Christophe