如何突出显示＆amp;没有标签？

Question

我正在开发WebApp。我的特色是快速搜索文章。

用两个词来说结构是：

• 页
• 全局数组（json，100-150项），包含由ajax提取的文章。 （带字段：id，title，snippet）。标题＆amp;代码段可能包含简单样式标记标记。

因此，当用户在popup-quicksearch字段中输入查询时，app

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>')，它也会替换e中的style="color:red"。< / p>

即。什么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

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

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

但实际上你需要做的不仅仅是因为：

• 脚本
• 文本域
• display:none，visibility:hidden等