Question

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

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

当我想突出显示 consectetur 并输入 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>')

＆＃13;

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

＆＃13;

.h {
  background: yellow;
}

＆＃13;

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

＆＃13;

Answer 3

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

即：

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>

RegExp，替换关键字的正确大写版本

3 个答案: