突出显示<；中字符串的每个实例；部门>；-Javascript

我在这里看到过多篇关于查找和突出显示字符串的帖子，但没有一篇像预期的那样有效。以下是我目前的脚本：

var str = 'word';
var divs= document.getElementsByClassName('strings');
for (var i = 0, len = divs.length; i < len; ++i) {
    if(divs[i].innerHTML.indexOf(str) !== -1) {
        // something
        console.log('YES');
        str.replace(/(\w+) (\w+)/, '<div class="strings">$1</div> <div class="strings">$2</div>');
    }else{
        console.log('NO');
    }
}

var str='word'；
var divs=document.getElementsByClassName（'strings'）；
对于（变量i=0，len=divs.length；i

HTML:

单词

---

理想情况下，每次将

js

作为函数运行时，这将突出显示my

div

中字符串的每个实例。

您使用的是针上的

replace（）

方法，而不是干草堆上的方法。您希望在

innerHTML

属性中找到str，然后用一个围绕给定

str

的副本替换innerHTML属性，该副本使用``标记找到

因为您正在使用一个变量进行正则表达式搜索，所以需要首先创建一个正则表达式对象并将针字符串注入其中。还为其指定

g

标志，使其匹配找到的正则表达式的每个实例：

var regex = new RegExp(`${str}`, ['g']);

然后操作div元素的innerHTML属性：

divs[i].innerHTML = divs[i].innerHTML.replace(regex, `<span class"highlighted">${str}</span>`);

---

您在打捆针上使用的是

replace（）

方法，而不是在干草堆上。您希望在

innerHTML

属性中找到str，然后用一个围绕给定

str

的副本替换innerHTML属性，该副本使用``标记找到

因为您正在使用一个变量进行正则表达式搜索，所以需要首先创建一个正则表达式对象并将针字符串注入其中。还为其指定

g

标志，使其匹配找到的正则表达式的每个实例：

var regex = new RegExp(`${str}`, ['g']);

然后操作div元素的innerHTML属性：

divs[i].innerHTML = divs[i].innerHTML.replace(regex, `<span class"highlighted">${str}</span>`);

---

您发布的代码在正确的轨道上，regex replace很方便，但是要非常小心，除了使用正确的逻辑之外，您不会通过清理输入字段来暴露自己或regex转义问题（尽管如果用户提供目标/源文本，XSS问题将主要是有问题的）

使用正则表达式上的

“gi”

标志使您的搜索不区分大小写（我使用了一个复选框来切换），并且可以在更新时随意循环搜索多个您希望搜索的文本区域（为了简单起见，我将其保留为一个）。将

\b

添加到正则表达式中以强制执行严格的单词边界（在下面的示例中也可以切换）。您还可以在高亮显示的元素上使用基本上任何元素或样式<代码>似乎最具语义

最后，值得确保搜索词不包含空字符串，这将在文本的每个字符之间添加大量垃圾突出显示标记

const escapeHTML=html=>{
const ta=document.createElement（“textarea”）；
ta.textContent=html；
返回ta.innerHTML；
};
const escapeRegex=s=>s.replace（/[-[\]{}（）*+？，\\^$\s]/g，“\$&”）；
常量突出显示=（搜索词、原始文本、案例、边界）=>{
常量模式=边界？`（\\b${searchTerm}\\b）`:`（${searchTerm}）`；
返回searchTerm？originalText.replace(
RegExp（模式，“g”+（酪蛋白？：“），“$1”
)：原文；
};
const output=document.querySelector（“输出”）；
const originalText=output.innerText；
让酪蛋白=假；
让边界=假；
让搜索词=”；
document.querySelector（“#忽略大小写”）.addEventListener（“更改”，e=>{
酪蛋白=e.target.checked；
output.innerHTML=突出显示（searchTerm、originalText、caseIns、Bounders）；
});
document.querySelector（“#单词边界”）.addEventListener（“更改”，e=>{
边界=e.target.checked；
output.innerHTML=突出显示（searchTerm、originalText、caseIns、Bounders）；
});
document.querySelector（“输入”）.addEventListener（“键控”，e=>{
searchTerm=escapeHTML（escapeRegex（e.target.value））；
output.innerHTML=突出显示（searchTerm、originalText、caseIns、Bounders）；
});
div：第一个孩子{
显示器：flex；
对齐项目：居中；
边缘底部：1米；
}
跨度{
左边距：1米；
}
标记{/*在此处添加样式*/
边界半径：2px；
}

忽略案例？
单词边界？
八十七年前，我们的先辈在这个大陆上建立了一个新的国家，它孕育于自由之中，致力于人人生而平等的主张。现在，我们正在进行一场伟大的内战，考验这个国家，或者任何一个如此构想、如此奉献的国家，是否能够长久存在。我们在那场战争的一个伟大战场上相遇。我们来到这里是为了奉献这片土地的一部分，作为那些在这里献出生命的人们的最后安息之地，使这个国家能够生存。我们这样做是完全恰当的。但是，在更大的意义上，我们不能奉献，我们不能奉献，我们不能使这块土地神圣化。曾经在这里战斗过的勇士们，无论是活着的还是死去的，都把这里神圣化了，这远远超出了我们微薄的力量所能增减的范围。世界不会注意到，也不会长久记住我们在这里所说的话，但它永远不会忘记他们在这里所做的事情。相反，我们活着的人应该在这里献身于尚未完成的工作，他们在这里战斗到目前为止已经崇高地推进了这项工作。我们应该在这里献身于摆在我们面前的伟大任务，从这些光荣的死者身上，我们更加献身于他们在这里为之付出最后全部奉献的事业，我们在这里下定决心，这些死者不会白白死去，我们的国家将在上帝的指引下获得自由的新生，“民有、民治、民享”的政府不会从地球上消失。
您发布的代码是正确的，regex替换是方便的，但要非常小心，除了使用正确的逻辑之外，您不会通过清理输入字段（al