1

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

用两个词结构是：

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

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

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

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

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

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

例如：我们有这样的事情：

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

我们需要突出显示 query e，期待 result: ... It<em>e</em>m ...，但如果使用 trivialreplace(/e/ig, '<em>$&</em>')它也会替换ein style="color:red"。

即什么正则表达式模式不接触标签中的单词？

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

4

2 回答 2

0

如果我理解正确，您需要在 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 获取匹配项的偏移量）。

于 2012-04-26T15:27:57.170 回答
-1

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

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

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

  • 脚本
  • 文本区域
  • display:none, visibility:hidden, 等
于 2012-04-04T17:43:47.480 回答