如何突出显示标签内外的文本？

Question

我正在开发 WebApp。我有快速搜索文章的功能。

用两个词的结构是：

• 页面
• 包含由 ajax 获取的文章的全局数组（json，100-150 项）。 （带有字段：id、title、sn-p）。 Title & Snippet 可能包含简单的样式标记标签。

所以，当用户在 popup-quicksearch 字段中输入查询时，应用程序

1. 在全局数组中搜索
2. 如果找到匹配项，push 到临时搜索结果数组（带缓存）
3. 在 temp 中突出显示匹配项。结果数组并显示给用户

如您所见，原始数组没有修改。

目前我正在使用原始 String.indexOf，但它无法匹配通过 html 标记文本格式化的文本（如下示例）：

问题是关于 RegEx 模式的。我清楚地知道不建议使用 RegEx 来操作 DOM，并且期望下面的结果在语义上不正确，但 它符合需求。

例如： 我们有这样的东西：

<ul><li>Item <i><span style="color:red">Y</span></i></li></ul>

我们需要突出显示查询e，预期结果：... It<em>e</em>m ...，但如果使用琐碎的replace(/e/ig, '<em>$&</em>')，它也会在style="color:red" 中替换e。

即什么 RegEx 模式不接触标签中的单词？

---

第二个例子：我们需要突出显示Item Y，所以期望结果是<ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

Answer 1

如果我理解正确，您需要在 DOM 树的片段的文本内容中进行搜索。实现此目的的一种方法是使用 XML/HTML 文本内容。这个例子使用了 jQuery，但这个想法很容易移植到其他库：

HTML：

<div id="article_contents">
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah
</div>

JavaScript：

var source = jQuery('#article_contents').text();
var queryRegexp = new RegExp ( 'Item 1', 'g' );
var results = source.match (queryRegexp);

现在results 将保存所有出现的搜索字符串。当然，要实现突出显示结果的目标，您必须更进一步（例如使用 RegExp.exec 获取匹配项的偏移量）。

Answer 2

一个简短的 hackish 解决方案是在搜索字符串的每个字母之间寻找标记。如果您的关键字是“搜索”，它将如下所示：

(s)(<[.^>]*>)*(e)(<[.^>]*>)*(a)(<[.^>]*>)*(r)(<[.^>]*>)*(c)(<[.^>]*>)*(h)

但实际上你需要做的还不止这些，因为：

• 脚本
• 文本区域
• display:none、visibility:hidden等