Question

可能重复：
Case insensitive string replacement in JavaScript?

我试图突出显示字符串的一部分，它等于另一个变量值。

例如

var string = 'This Is A Test String';
var findWord = 'test';

结果应该是

'This Is A <b>Test</b> String'

请注意不区分大小写，并且我要求使用变量来传递'find / Replace word'

我需要这样做的原因是为了保持字符串的确切形式/大小写，其中is ==到搜索词。

在PHP中，这是有效的，所以基本上我是在等同于

的JS之后

preg_replace('/('.$search.')/i','<b>$1</b>',$val['name'])

对于正则表达式我不是很好，对某人来说这应该很简单。

Answer 1

我建议：

var string = "This is a test string.",
needle = "test",
re = new RegExp(needle, "gi"),
newString = string.replace(re, "<strong>" + needle + "</strong>");
console.log(newString);

JS Fiddle demo

请注意，我使用<strong></strong>而不是<b></b>（故意），当然，您可以使用您喜欢的任何元素类型。此外，gi标志：

g用于全局搜索，而不是简单地在第一场比赛时停止，
i用于不区分大小写，因此'test'将匹配Test，tESt等等...

已编辑以保留匹配的字符串/子字符串的大小写：

var string = "This is a Test string.",
    needle = "test",
    re = new RegExp(needle, "gi"),
    newString = string.replace(re, function(a,b){
        return "<strong>" + a + "</strong>";
    });

document.getElementById('input').appendChild(document.createTextNode(string));
document.getElementById('result').innerHTML = newString;

JS Fiddle demo

已编辑以创建更具功能性/可重用性的方法：

function formatMatches(el, needle, wrapper) {
    if (!el || !needle) {
        return false;
    }
    else {
        var re = new RegExp(needle, "gi"),
            haystack = el.textContent,
            o = '<' + wrapper + '>',
            c = '</' + wrapper + '>';
        return haystack.replace(re, function(a) {
            return o + a + c;
        });
    }
}

var needle = "test",
    el = document.getElementById('input'),
    wrapper = 'strong';

document.getElementById('result').innerHTML = formatMatches(el, needle, wrapper);

JS Fiddle demo

参考文献：

Answer 2

var str = 'This Is A Test String';
var w = 'test';

var result = str.replace(new RegExp(w, 'gi'), function(match) {
  return "<b>" + match + "</b>";
});

编辑：或者，根据评论的建议，最后一行可以替换为：

var result = str.replace(new RegExp(w, 'gi'), "<b>$&</b>");

JS .replace将b标记放在字符串中== string

2 个答案: