javascript - 替换字符串 char 但保留大小写类型

Question

我使用以下代码，当用户以大写和小写形式键入一些值时，我将该值标记为粗体，以下代码有效。

var typedVal = oAcF._sTypedChars.toLowerCase();
element.innerHTML = element.innerHTML.replace(typedVal, "<b>" + typedVal + "</b>");

这里我得到了值并将其设置为小写，因为我想处理用户输入大写时的情况

var typedVal = oAcF._sTypedChars.toLowerCase();

这里我取值可以是 aa 并在内部 html 中找到它并将其添加到粗体中。

element.innerHTML = element.innerHTML.replace(typedVal, "<b>" + typedVal + "</b>")

问题是如果我在 innerHTML 例如AA 它不会工作，因为值是大写的，我该如何克服它？

我不能使用以下内容，因为我想保留原始大小写的值，所以在此示例中大写...

element.innerHTML = element.innerHTML.toLowerCase().replace(typedVal, "<b>" + typedVal + "</b>")

Answer 1

我发现要准确理解您的问题有点困难。我想你想要这个:

 var typedVal = oAcF._sTypedChars.toLowerCase();
 var re = new RegExp("("+typedVal.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')+")", "ig");  
 element.innerHTML = element.innerHTML.replace(re, "<b>$1</b>");

在搜索字符串时使用 i 或忽略大小写，因此 aaa 也会找到 aAa，同时保持 大写.

g 将在全局范围内执行此操作，或者简单地对它可以找到的每个实例执行此操作。

当你在替换中使用变量作为搜索字符串时，你不能应用忽略大小写和global标志，所以你需要使用RegExp 构造函数。

.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') 用于转义字符否则会破坏正则表达式。

受其他帖子和您自己的评论的启发，我也意识到您需要使用捕获组 $#。这些是在您在正则表达式部分周围使用括号时创建的。我们只有一个捕获组，因此用 $1 标识它。

实践中:

function changeInput(element)
{
     var typedVal = document.querySelector("input").value.toLowerCase();
     var re = new RegExp("("+typedVal.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')+")", "ig");  
     element.innerHTML = element.innerHTML.replace(re, "<b>$1</b>");
}

document.querySelector("button").addEventListener("click", changeInput.bind(window, document.querySelector("div")), false);

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim risus quis lorem scelerisque, in varius felis consectetur. Quisque dignissim leo eros, nec accumsan velit sodales id. Nullam laoreet lectus sit amet felis dignissim, eu fermentum tortor gravida. Praesent aliquet auctor purus, a bibendum nisl convallis et. Mauris fermentum purus mauris, vitae porttitor dolor scelerisque at. Aenean arcu leo, semper eu elementum sed, rutrum a eros. Vivamus a ante urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lorem sapien, pretium et elementum vitae, maximus finibus ligula. Morbi imperdiet venenatis nisi eget eleifend. In ornare odio ante, ac congue velit blandit non. Sed pulvinar lorem ac ex tristique cursus at ut eros. Sed rutrum tristique turpis, in facilisis dui gravida lobortis. </div>

<input placeholder="type some input here" />
<button>Click to highlight the input</button>