替换/突出显示JavaScript中的字符串-保持大小写敏感性

Replace/highlight string in JavaScript - keep the case sensitivity

本文关键字：字符串 敏感性 大小写 显示 JavaScript 替换      更新时间：2023-09-26

我想在句子中突出显示一个字符串。替换应该适用于不区分大小写的字符(如句子My Foo bar中的字符串foo)。

这对我来说没有问题。

var regEx = new RegExp(this._searchString, "gi");
var label = $(item).text();
label = label.replace(regEx, '<span style="font-weight:bold;">' + this._searchString + '</span>');
$(item).html(label);

问题是:如果我在My Foo bar中搜索并替换foo，结果将是My <span style="font-weight:bold;">foo</span> bar，但我想要的是My <span style="font-weight:bold;">Foo</span> bar。

所以搜索应该忽略大小写敏感性，而不是替换。知道怎么做吗?我看到的唯一方法是首先检查字符串是否包含搜索的字符串，提取它(区分大小写)，修改它并将其放回字符串中。但这对我来说似乎工作量太大了，不是吗?

您必须通过将字符串包装在括号中并在替换字符串中使用$1引用来捕获组中的字符串。

EDIT:我用'b包装匹配模式，只匹配整个单词。

    var original_string = 'My Foo bar',
        variable = 'foo',
        regex = new RegExp('(''b'+variable+'''b)', 'gi'); // note the parentheses around variable
    console.log(original_string.replace(regex, 'precious $1 is really')); // here you reference the 1st capture with $1

使用此方法:Javascript替换引用匹配组?

str = $("#test").text()
var regEx = new RegExp("foo", "gi");
str = str.replace(regEx, function(a,b){
    console.log(a)
	return '<span style="font-weight:bold;color:red">' + a + '</span>'
})
$("#test").html(str)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">My Foo bar with Foos and fOO</div>

相关文章：