在jquery中替换多个字符串中的多个子字符串

Question

我有一个小程序正在检查字符串中的字符序列对数组元素，如果在数组terms中找到了一个序列，比做某事。然而，这只适用于我使用下面的机制在数组中的第一次实例匹配。我怎么能让这种情况发生多次？

实施例：terms = ['hello', 'world', 'this', 'is', 'me']

给予程序字符串是：hello here is me

程序询问是否替换了在一个字符串中找到匹配任何的话的话红色和绿色的数组中的字分别，但是程序停止在找到的第一个发生，也就是从当前编程的系统的结果：

'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>"); 
     } 
     } 
    } 

校验（“这是二的一个实施例的字符串”）;

目前我的程序的结果是： 这是

一个例如字符串我想解决我的程序导致此： 这是一个例如串四个

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

Answer 2

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

 

 
function check(str) { 
 
    var 
 
    s = str.split(' '); 
 
    out = [], 
 
    redgreen = ['red','green'], 
 
    rgcount = 0; 
 
    
 
    s.forEach(function (k, i) { 
 
    if (terms.indexOf(k) >= 0) { 
 
     var color = redgreen[rgcount]; 
 
     out.push('<span class="'+color+'">'+color+'</span>'); 
 
     rgcount = (rgcount + 1) % 2; 
 
    } else out.push(k); 
 
    }); 
 
    document.write(out.join(' ')+'<br/>'); 
 
} 
 

 
check('hello here is me'); 
 
check('one two there is three four pink yelow there is this what yet there'); 
 
check(terms.join(' '));

.red { 
 
    color: red 
 
} 
 
.green { 
 
    color: green; 
 
}