0

我想突出显示一组单词,它们可以单独出现或连续出现。如果它们一个接一个出现,我希望它们一起突出显示,如果没有,它们也应该突出显示,就像正常行为一样。例如,如果我想突出显示以下单词:

结果为

主题是:

实时结果:在您键入时显示结果

我希望结果是:

实时结果:在您键入 </span> 时显示 <span class="highlighted"> 结果

空格也令人头疼,因为我尝试使用 or 表达式:

( results )|( as )

带有空格以防止突出显示诸如低音、崩溃等单词。但是由于结果之后的空格与 as 之前的空格相同,因此正则表达式会忽略它并仅突出显示结果。

它可用于突出显示许多单词,因此

( (one) (two) )|( (two) (one) )|( one )|( two )

不是一个选择:(

然后我认为可能有一个操作员像 | 如果可能的话,可以用来匹配两者,否则匹配一个,或者另一个。

4

2 回答 2

5

使用空格来确保匹配完整的单词是错误的方法。这就是单词边界的用途:\b匹配单词和非单词字符之间的位置(其中单词字符通常是字母、数字和下划线)。要匹配所需单词的组合,您只需将它们全部交替排列(就像您已经做的那样),并尽可能多地重复。像这样:

(?:\bresults\b\s*|\bas\b\s*)+

这假设您也想results在示例中突出显示第一个和单独的(这将满足您对问题的描述)。

于 2013-07-15T18:01:13.423 回答
3

也许您不需要匹配相邻的一串单词。为什么不像这样应用突出显示:

实时结果:显示 <span class="highlighted">results</span> <span class="highlighted">as</span> 你输入

唯一真正的区别是单词之间的空格没有突出显示,但这是一个干净且简单的折衷方案,可以节省您的工作时间,并且似乎丝毫不会损害用户体验(在我看来)。

在这种情况下,您可以只使用交替:

\b(results|as)\b

\b作为单词边界锚

如果您真的不喜欢单词之间的空格不被突出显示,您可以编写一个 jQuery 函数来查找仅由空格分隔的“突出显示”跨度,然后将它们组合起来(实现您的 UX 设计目标的“第二阶段”)。

更新
(好的......所以通过 jQuery 合并跨度实际上有点困难。请参阅Find text between two tags/nodes

于 2013-07-15T18:36:40.017 回答