Javascript - 基于数组替换字符串答案

【问题标题】：Javascript - replace string basing on arrayJavascript - 基于数组替换字符串
【发布时间】：2014-06-27 11:21:24
【问题描述】：

我有

mystring = "Google" 我有数组

myarray = ["o", "o", "e"]

我想做类似的事情

mystring.replace(myarray, "<b>$</b>")

所以它会返回Google - 每个来自数组的匹配字母都包含在标签中。

我也有适当的正则表达式 /.*?(o).*?(o).*(e).*/i 匹配组为 o 后跟 o 后跟 e。

那些数组和字符串是自动生成的（模糊搜索），所以我不能说数组和字符串会有多大。我只知道要在字符串中查找的字母。

【问题讨论】：

匹配只针对数组每个元素的第一个ocurrency？我问是因为如果不需要，您的数组中不需要两个 o。
我需要在数组中有两个 o，因为它说我需要在字符串中“加粗”两个 o 而不仅仅是一个。而且我还需要尊重数组中字母的顺序。所以第一个 o 的意思是“在字符串中找到第一个 o”，然后“找到另一个 o，但它必须在数组的最后一个匹配之后”

标签： javascript arrays regex

【解决方案1】：

你可以这样做：

mystring =  "Google";
myarray = ["o", "o", "e"];

var r = mystring.replace(new RegExp( '(' + myarray.join('|') + ')', 'g'), "<b>$1</b>");
//=> G<b>o</b><b>o</b>gl<b>e</b>

编辑：基于以下讨论：

mystring =  "Google";
myarray = ["g", "o", "e"];

var r = mystring;
for (var i in myarray) {
    r = r.replace(new RegExp('('+myarray[i]+')(?!<\\/b>)', "i"), "<b>$1</b>");
}
console.log(r); // <b>G</b><b>o</b>ogl<b>e</b>

PS：由于使用了否定前瞻，(?!<\/b>) 相同的字母不会被替换两次。

JSFiddle

【讨论】：

假设数组将是 ["g", "o", "e"] - 那么应该发生的是：g，第一个 o（只有第一个，不是每个）在找到 g 和 fis 之后找到 o 后的 e 应该是“粗体”。顺便提一句。我不是投反对票的人。
1+ 这正是我在小提琴中所做的。我也想知道怎么回事。
你能提供小提琴吗？这是我的：jsfiddle.net/8fTM8（两个 o 加粗，应该只是 g 之后的第一个）。与 g 相同 - 只有第一个应该加粗
这是我的jsfiddle.net/8fTM8 - 预期结果，第一个 G，最后一个匹配后的第一个 o，最后一个匹配后的第一个 e 为粗体。实际结果 - 每个 g、o、e 加粗。
对于 OP 的最后一条评论仍然不起作用。您必须添加忽略大小写RegExp('('+myarray[i]+')','i')

【解决方案2】：

这是我要走的路：

var tmp = mystring;
for (l in myarray) {
    tmp = tmp.replace(new RegExp('('+myarray[l]+'(?:\\B|$))'), '<b>$1</b>');
}

控制台：

G<b>o</b><b>o</b>gl<b>e</b>

(?:\\B|$) 使正则表达式不生成 Google

你也可以使用：

new RegExp('('+myarray[l]+'(?!<))')

【讨论】：

【解决方案3】：

所以我想出了这样的东西：

var boldByArray = function( string, array ){
    var result = [];
    string.split('').forEach( function( letter ){
        if( array.indexOf( letter ) == 0 ){
             result.push( '<b>' + array.shift() +'</b>' );
        }
        else {    
            result.push( letter );
         }
    });
    return result.join('');
}

数组boldByArray('google', ['e','g','o']) 的结果将是Google，因为您要遵守顺序，所以它会找到e，然后在e 之后查找g 和o，这永远不会出现。 boldByArray('google', ['x','g','o']) 将只是 google，因为没有 x。

http://jsfiddle.net/wuSaE/1/

更新了从您提供的 cmets 收集的模糊匹配演示：http://jsfiddle.net/wuSaE/3/

【讨论】：