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

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++) {

  let str = items[i];

  if (!regex.test(str)) {

    print("Item: " + items[i] + "; Doesn't match the term: " + term);

    continue;

  }

  let lastIndex = 0;

  for (let letter of term) {

    str = str.slice(0, lastIndex) + str.slice(lastIndex).replace(letter, fn_wrapper);

  }

  print("Item: " + items[i] + "; Matches the term in the characters: " + str);

    

  /***/

  function fn_wrapper(letter) {

    // 1-st argument of replacer-function == full match (each letter, in this case)

    let wrap = "<b>" + letter + "</b>";

    lastIndex += wrap.length;

    return wrap;

  }

}

/***/  

function print(msg) {

  document.body.insertAdjacentHTML("beforeEnd", "<div>" + msg + "</div>");

}

b { color: red; }

Answer 2

实现这一点的一种方法是构建一个替换字符串，该字符串与变量中的字符数（以及介于两者之间的字符数）匹配，以便它可以同时替换与测试正则表达式匹配的所有字符：term

var items = [

  'red',

  'green',

  'grey-green',

  'yellow',

  'blue',

  '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++) {

  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, replace_string);

    document.write(item);

  }

}

Answer 3

我认为这就是你正在努力实现的目标。您应该使用括号来捕获使用正则表达式的组。该函数将返回一个包含捕获组的数组。match

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;

        let regexMatch = text.match(regex);

        var item = optionText.replace(regexMatch[1], '<b>' + regexMatch[1] +'</b>');

        document.write(item);

    }

}