正则表达式，替换正确的大写版本的关键字

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

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

即：

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>