突出显示字符串中匹配的单词

时间:2014-04-01 13:14:11

标签: javascript regex

我在Javascript中有以下字符串:

Smith, Dan

我有一些Javascript来突出显示该字符串中与单词数组匹配的部分(基于用户的搜索输入)。因此,如果用户键入“smith d”,那么我的数组和预期输出将包含:

string = "Smith, Dan"
word[0] = "smith"
word[1] = "d"
output: <em>Smith</em>, <em>D</em>an

然而,当第二个单词包含在第一个单词中时,这会失败。因此,例如,如果字符串是“Smith,Helen”,则会发生以下情况:

string = "Smith, Helen"
word[0] = "smith"
word[1] = "h"
output: <em>Smit<em>h</em></em>, <em>H</em>elen

我正在使用正则表达式来执行替换,因为需要保持源文本大小写相同(因此,如果用户键入“smith”,我仍然会返回“Smith”)。

这是我的代码:

var output = "Smith, Helen";
var arText = new Array();
arText[0] = "smith";
arText[1] = "h";
for (var iw = 0; iw < arText.length; iw++) {
    var term = arText[iw];
    var re = new RegExp('(' + term + ')', 'gi');
    output = output.replace(re, '<em>$1</em>');
}

有人可以建议我如何修改它,以便它忽略已经在em标签内的单词?我想要的上述代码输出是:

<em>Smith</em>, <em>H</em>elen

1 个答案:

答案 0 :(得分:0)

您的搜索看起来与字边界有关。我不知道你所有的边缘情况,但是对现有代码的这种补充确实会返回你寻找的输出。只要搜索涉及换行符,它也应该适用。

var output = "Smith, Helen";
var arText = new Array();

arText[0] = "smith";
arText[1] = "h";

for (var iw = 0; iw < arText.length; iw++) {
  var term = arText[iw];
  var re = new RegExp('(\\b' + term + ')', 'gi');
  output = output.replace(re, '<em>$1</em>');
}// notice the \\b which means look for term by line break. double escape for string.

<强>输出

"<em>Smith</em>, <em>H</em>elen"

另一个更复杂的例子

var output = "Smith, Helen butter";
var arText = new Array();

arText[0] = "smith";
arText[1] = "h";
arText[2] = "bu";

for (var iw = 0; iw < arText.length; iw++) {
  var term = arText[iw];
  var re = new RegExp('(\\b' + term + ')', 'gi');
  output = output.replace(re, '<em>$1</em>');
}

<强>输出

"<em>Smith</em>, <em>H</em>elen <em>bu</em>tter"