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

Question

我有一个具有自动完成功能的输入字段（自定义自动完成）。

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

因此，例如，如果我有类似"Hello World"的字符串并且用户键入"ll"，他应该得到一个包含"ll"但"ll"应该有不同颜色的匹配短语列表。

所以我需要一种方法来拼接“Hello World”所以我会得到：["he","ll","o World"]然后我可以用“ll”包装并设置它<span>的样式。

Answer 1

您可以使用替换

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

编辑：

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

现场演示

Answer 2

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

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

Answer 3

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

'Hello World'.replace(/(ll)/g, '<span>$1</span>');

或者更好的是，如果您希望文本中的每个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'

Answer 4

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

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

请注意，这仅替换subif 有很多的第一次出现，但这可能是您想要的。