REGEXP，替换关键字的正确资本化版本

Question

我有一个简单的文本，当单击按钮时，我突出显示一个特定的关键字。

<p id="mytext">Lorem ipsum dolor sit amet, consectetur.</p>

当我想突出显示 ConsectEtur 和type ConsectEtur 时，它会突出显示但大写。

，但最初不是一个大写字母。

我们如何修复它？

jsfiddle

var mytext = document.getElementById("mytext");
var btn = document.getElementById("btn");
var word = "Consectetur";
btn.addEventListener("click", function() {
  mytext.innerHTML = mytext.innerHTML.replace(new RegExp(word, 'gi'), '<span class="h">' + word + '</span>')
}, false);

.h {
  background: yellow;
}

<p id="mytext">Lorem ipsum dolor sit amet, consectetur.</p>
<button id="btn">Click</button>

Answer 1

var mytext = document.getElementById("mytext");
var btn = document.getElementById("btn");
var word = /Consectetur/gi;
btn.addEventListener("click", function() {
  mytext.innerHTML = mytext.innerHTML.replace(word, '<span class="h">$&</span>')
}, false);

.h {
  background: yellow;
}

<p id="mytext">Lorem ipsum dolor sit amet, consectetur.</p>
<button id="btn">Click</button>

Answer 2

使用捕获组，然后用匹配的值替换。$1参考第一个(唯一的(捕获的组。

mytext.innerHTML.replace(new RegExp("(" + word + ")", 'gi'), '<span class="h">$1</span>')

var mytext = document.getElementById("mytext");
var btn = document.getElementById("btn");
var word = "Consectetur";
btn.addEventListener("click", function() {
  mytext.innerHTML = mytext.innerHTML.replace(new RegExp("(" + word + ")", 'gi'), '<span class="h">$1</span>')
}, false);

.h {
  background: yellow;
}

<p id="mytext">Lorem ipsum dolor sit amet, consectetur.</p>
<button id="btn">Click</button>

Answer 3

保持当前代码，只需将.toLowerCase()附加到word

IE：

word.toLowerCase()

var mytext = document.getElementById("mytext");
var btn = document.getElementById("btn");
var word = "Consectetur";
btn.addEventListener("click", function() {
  mytext.innerHTML = mytext.innerHTML.replace(new RegExp(word, 'gi'), '<span class="h">' + word.toLowerCase() + '</span>')
}, false);

.h {
  background: yellow;
}

<p id="mytext">Lorem ipsum dolor sit amet, consectetur.</p>
<button id="btn">Click</button>