javascript - 在 jquery 中替换字符串中多次出现的多个子字符串

Question

我有一个小程序，它根据数组元素检查字符串中的字符序列，如果在数组 terms[] 中找到序列，则执行某些操作。但是，这仅适用于使用以下机制的数组中的第一个实例匹配项。我怎样才能让这种情况发生多次？

示例:terms = ['hello', 'world', 'this', 'is', 'me']

给程序的字符串是:hello here is me

程序被要求将在字符串中找到的与数组中的任何单词匹配的单词分别替换为单词 red 和 green，但是程序在找到第一个匹配项时停止，即当前的结果编程系统是:

'red here is me'

代替

'red here green me'

如何更改以下功能以获得第二个结果？

for (var i = 0; i < terms.length && !match; i++) {
    if (string.indexOf(terms[i]) > -1) {
        match = true;
        var newString = '';
        wrapper.css("background", "#a1e4ff");
        var matchString = string.substring(string.indexOf(terms[i]), (string.indexOf(terms[i]) + terms[i].length));

我不认为你理解我，我不关心 css，我关心子字符串替换。

这是我当前的代码

function check(string) {
    var terms = ['one', 'two'];
    var match = false;

    for(var i=0;i<terms.length;i++) {

        if(string.indexOf(terms[i]) > -1) {
            match = true;
            var newString='';
            var matchString = string.substring(string.indexOf(terms[i]), (string.indexOf(terms[i])+terms[i].length));

            switch(matchString) {
                case 'one':
                newString = string.replace(matchString, "three");
                break;
              case 'two':
                newString = string.replace(matchString, "four");
              default:
                alert('no matches');
            }

            $("ul").append("<li>" + newString + "</li>");
        }
      }
    }

check('这是一个由两个组成的示例字符串');

目前我的程序结果是这样的: 这是一个three 示例字符串 two

我想修复我的程序以产生这样的结果: 这是一个三示例字符串，包含四

Answer 1

使用 String#replace具有替换功能，并在颜色之间交替:

function replaceWithColor(str, terms) {
  var termsDict = terms.reduce(function(d, t) {
    d[t] = true;
    return d;
  }, Object.create(null));
  
  var colors = ['red', 'green'];

  var i = 0;

  return str.replace(/\w+/g, function(t) {
    return termsDict[t] ? colors[i++ % 2] : t;
  });
}

var terms = ['hello', 'world', 'is', 'me'];

var str = "hello here this is me";

var result = replaceWithColor(str, terms)

console.log(result);

还有一个使用 Set 的 ES6 版本和箭头函数:

const replaceWithColor = (str, terms) => {
  const termsSet = new Set(terms);
  
  const colors = ['red', 'green'];

  let i = 0;

  return str.replace(/\w+/g, (t) => termsSet.has(t) ? colors[i++ % 2] : t);
}

var terms = ['hello', 'world', 'is', 'me'];

var str = "hello here this is me";

var result = replaceWithColor(str, terms)

console.log(result);