使用正则表达式突出显示字符串中的匹配字符

Question

我试图突出显示正则表达式的匹配字符，目前我有这个：

var items = [

    'red',

  'green',

  'yellow',

  'blue',

  'orange',

];

var term = 're';

var regex_text = '.*';

regex_text += (term).split('').join('.*');

regex_text += '.*';

var regex = new RegExp(regex_text);

for (let i = 0; i < items.length; i++) {

     var text = items[i];

     document.write("<br>Item: " + text);

     if (!regex.test(text)) {

        document.write(" doesn't match the term: " +  term) 

   } else {

      document.write(" matches the term in the characters: ");

      var optionText = text;

      var item = optionText.replace(regex, '<b>$1</b>');

      document.write(item);

   }

}

但结果不是我所期望的，我要去的（没有空格）：

断续器

g r e en

黄色

蓝

o r ang e

Answer 1

您可以使用正则表达式来测试匹配项。如果字符串匹配 - 逐个替换字母：let items = [ 'red', 'green', 'yellow', 'blue', 'orange', 'error', 'errorer' ];let term = 're';let regex = new RegExp(term.split("").join(".*"));for (let i = 0; i < items.length; i++) {&nbsp; let str = items[i];&nbsp; if (!regex.test(str)) {&nbsp; &nbsp; print("Item: " + items[i] + "; Doesn't match the term: " + term);&nbsp; &nbsp; continue;&nbsp; }&nbsp; let lastIndex = 0;&nbsp; for (let letter of term) {&nbsp; &nbsp; str = str.slice(0, lastIndex) + str.slice(lastIndex).replace(letter, fn_wrapper);&nbsp; }&nbsp; print("Item: " + items[i] + "; Matches the term in the characters: " + str);&nbsp; &nbsp;&nbsp;&nbsp; /***/&nbsp; function fn_wrapper(letter) {&nbsp; &nbsp; // 1-st argument of replacer-function == full match (each letter, in this case)&nbsp; &nbsp; let wrap = "<b>" + letter + "</b>";&nbsp; &nbsp; lastIndex += wrap.length;&nbsp; &nbsp; return wrap;&nbsp; }}/***/&nbsp;&nbsp;function print(msg) {&nbsp; document.body.insertAdjacentHTML("beforeEnd", "<div>" + msg + "</div>");}b { color: red; }

Answer 2

实现这一点的一种方法是构建一个替换字符串，该字符串与变量中的字符数（以及介于两者之间的字符数）匹配，以便它可以同时替换与测试正则表达式匹配的所有字符：termvar items = [&nbsp; 'red',&nbsp; 'green',&nbsp; 'grey-green',&nbsp; 'yellow',&nbsp; 'blue',&nbsp; 'orange'];var term = 're';var chars = term.split('');var regex_text = '(' + chars.join(')(.*?)(') + ')(.*)';var regex = new RegExp(regex_text);var replace_string = chars.map((_, i) => '<b>$'+(i*2+1)+'</b>$' + ((i+1)*2)).join('');for (let i = 0; i < items.length; i++) {&nbsp; var text = items[i];&nbsp; document.write("<br>Item: " + text);&nbsp; if (!regex.test(text)) {&nbsp; &nbsp; document.write(" doesn't match the term: " + term)&nbsp; } else {&nbsp; &nbsp; document.write(" matches the term in the characters: ");&nbsp; &nbsp; var optionText = text;&nbsp; &nbsp; var item = optionText.replace(regex, replace_string);&nbsp; &nbsp; document.write(item);&nbsp; }}

Answer 3

我认为这就是你正在努力实现的目标。您应该使用括号来捕获使用正则表达式的组。该函数将返回一个包含捕获组的数组。matchvar items = [&nbsp; &nbsp; 'red',&nbsp; &nbsp; 'green',&nbsp; &nbsp; 'yellow',&nbsp; &nbsp; 'blue',&nbsp; &nbsp; 'orange',];var term = 're';var regex_text = '.*(';regex_text += (term).split('').join('.*');regex_text += ').*';var regex = new RegExp(regex_text);for (let i = 0; i < items.length; i++) {&nbsp; &nbsp; var text = items[i];&nbsp; &nbsp; document.write("<br>Item: " + text);&nbsp; &nbsp; if (!regex.test(text)) {&nbsp; &nbsp; &nbsp; &nbsp; document.write(" doesn't match the term: " +&nbsp; term)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; document.write(" matches the term in the characters: ");&nbsp; &nbsp; &nbsp; &nbsp; var optionText = text;&nbsp; &nbsp; &nbsp; &nbsp; let regexMatch = text.match(regex);&nbsp; &nbsp; &nbsp; &nbsp; var item = optionText.replace(regexMatch[1], '<b>' + regexMatch[1] +'</b>');&nbsp; &nbsp; &nbsp; &nbsp; document.write(item);&nbsp; &nbsp; }}