如何在javascript中将字符串拼接到不均匀的部分

我有一个输入字段，上面有自动完成（定制的自动完成）

当用户键入一个单词时，匹配的短语应该出现，但用户键入的单词应该有不同的颜色

因此，例如，如果我有像“Hello World”这样的字符串，并且用户键入“ll”，他应该会得到包含“ll”的匹配短语列表，但是“ll”应该有不同的颜色

---

因此，我需要一种拼接“Hello World”的方法，这样我将得到：

[“he”，“ll”，“o World”]

，然后我可以用

包装“ll”，并对其进行样式设置。

一种可能的正则表达式解决方案：

var part = "ll";
"Hello World".match(new RegExp("^(.*)(" + part + ")(.*)$")).slice(1);
// >> ["He", "ll", "o World"]

---

一种可能的正则表达式解决方案：

var part = "ll";
"Hello World".match(new RegExp("^(.*)(" + part + ")(.*)$")).slice(1);
// >> ["He", "ll", "o World"]

您可以使用replace

strhtml.replace (/yourstrToSearch/g, '<span class="cl">' + 'yourstrToSearch' + '</span >');

strhtml.replace（/yourstresearch/g，“+”yourstresearch“+”）；

编辑：

yourstrToSearch = "ll";
var regex = new RegExp( yourstrToSearch, "gi");
$('#div1').html($('#div1').html().replace(regex, '<span class="cl">' + yourstrToSearch + '</span >'));

yourstresearch=“ll”；
var regex=new RegExp（您的strtosearch，“gi”）；
$（'#div1'）.html（$（'#div1'）.html（）.replace（regex，'+yourstertosearch+''）；

您可以使用替换

strhtml.replace (/yourstrToSearch/g, '<span class="cl">' + 'yourstrToSearch' + '</span >');

strhtml.replace（/yourstresearch/g，“+”yourstresearch“+”）；

编辑：

yourstrToSearch = "ll";
var regex = new RegExp( yourstrToSearch, "gi");
$('#div1').html($('#div1').html().replace(regex, '<span class="cl">' + yourstrToSearch + '</span >'));

yourstresearch=“ll”；
var regex=new RegExp（您的strtosearch，“gi”）；
$（'#div1'）.html（$（'#div1'）.html（）.replace（regex，'+yourstertosearch+''）；

---

忘记拆分字符串。在这种情况下，用span替换match（在您的示例中为ll）要容易得多，如下所示：

var i = 0;
'Hello Hello World'.replace(/(ll)/g, function(match) {
    i++;
    return '<span class="highlight-'+i+'">'+match+'</span>;
});

// above returns - you can style highlight-1 .. n so each of them have different color
'He<span class="highlight-1">ll</span>o He<span class="highlight-2">ll</span>o World'

'Hello World'。替换（/（ll）/g，$1'）；

或者更好，如果您希望文本中的每个ll具有不同的样式，您可以通过函数替换函数，如下所示：

var i = 0;
'Hello Hello World'.replace(/(ll)/g, function(match) {
    i++;
    return '<span class="highlight-'+i+'">'+match+'</span>;
});

// above returns - you can style highlight-1 .. n so each of them have different color
'He<span class="highlight-1">ll</span>o He<span class="highlight-2">ll</span>o World'

var i=0；
“Hello Hello World”。替换（/（ll）/g，函数（匹配）{
i++；
返回“”+匹配+”；
});
//以上返回-您可以设置highlight-1的样式。。所以它们每个都有不同的颜色
“你好，你好，世界”

忘记拆分字符串。在这种情况下，用span替换match（在您的示例中为ll）要容易得多，如下所示：

var i = 0;
'Hello Hello World'.replace(/(ll)/g, function(match) {
    i++;
    return '<span class="highlight-'+i+'">'+match+'</span>;
});

// above returns - you can style highlight-1 .. n so each of them have different color
'He<span class="highlight-1">ll</span>o He<span class="highlight-2">ll</span>o World'

'Hello World'。替换（/（ll）/g，$1'）；

或者更好，如果您希望文本中的每个ll具有不同的样式，您可以通过函数替换函数，如下所示：

var i = 0;
'Hello Hello World'.replace(/(ll)/g, function(match) {
    i++;
    return '<span class="highlight-'+i+'">'+match+'</span>;
});

// above returns - you can style highlight-1 .. n so each of them have different color
'He<span class="highlight-1">ll</span>o He<span class="highlight-2">ll</span>o World'

var i=0；
“Hello Hello World”。替换（/（ll）/g，函数（匹配）{
i++；
返回“”+匹配+”；
});
//以上返回-您可以设置highlight-1的样式。。所以它们每个都有不同的颜色
“你好，你好，世界”

这里的诀窍是不要使用正则表达式，因为如果替换字符串包含正则表达式特殊字符（如点或大括号），正则表达式将失败。因此，只需按原样将字符串传递到

replace

：

str = 'Hello Hello World'
sub = 'll'
result = str.replace(sub, '<span>$&</span>')

str='Hello World'
sub='ll'
结果=str.replace（子“$&”）

请注意，如果有许多次出现的

sub

，则只替换第一次出现的次，但这可能是您想要的方式。

这里的诀窍是不要使用正则表达式，因为如果替换字符串包含正则表达式特殊字符（如点或大括号），它们将失败。因此，只需按原样将字符串传递到

replace

：

str = 'Hello Hello World'
sub = 'll'
result = str.replace(sub, '<span>$&</span>')

str='Hello World'
sub='ll'
结果=str.replace（子“$&”）

请注意，如果有许多子类，则只替换第一次出现的子类，但这可能是您想要的