javascript - JS .replace 将 b 标记放在字符串中，其中 == 字符串

Question

可能重复：
JavaScript 中不区分大小写的字符串替换？

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

例如

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

结果应该是

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

请注意不区分大小写，我需要使用变量来传递“查找/替换单词”

我需要这样做的原因是为了将找到的字符串的确切形式/大小写保留在 == 到搜索词中。

在 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 小提琴演示。

请注意，我使用<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 小提琴演示。

---

编辑以创建更实用/可重用的方法：

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 小提琴演示。

参考：

• node.appendChild().
• document.createTextNode().
• RegExp().
• string.replace().

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