仅对输入单词匹配的段落使用合理的边界函数

Question

因此，我想为正确段落的div加边框，例如，当我输入一个像"Security"这样的单词时，然后在第三个单词中，"comment2"div将被加边框。我想要的是：只有相应的div需要加边框，单词出现的地方。该函数正在运行，但问题是在我提交匹配的单词后，所有div都被加了边框。

function bordering1() {
var text = document.getElementById("texthere").textContent;
var inputText = document.getElementById("commentsec");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
var n = document.getElementsByClassName("commentdiv");
for (var i = 0; i < n.length; i++) {
if (index > 0) {
n[i].setAttribute("style", "border: 1px solid blue;");
}
}
}

<div class="col-md-8 col-md-offset-2 bordered" id="commentsec">
<div class="col-md-12 bordered commentdiv" id="comment0">
<div class="col-md-10 para bordered" id="paragraphdiv">
<p id="firstcomment">Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall
coder quality.</p>
</div>
</div>
<div id="comment1" class="col-md-12 bordered commentdiv">
<div id="paragraphdiv" class="col-md-10 para bordered">
<p id="secondcomment">Sacrificing quality is something we refuse to do at Peak and that’s a key component in our Global Coding success.</p>
</div>
</div>
<div id="comment2" class="col-md-12 bordered commentdiv">
<div id="paragraphdiv" class="col-md-10 para bordered">
<p id="secondcomment">Security of Patient Health Information (PHI), Data, Network, Hardware, Software and Physical Infrastructure are all top priorities for Peak.</p>
</div>
</div>
</div>

Answer 1

我想你有点受够了，是索引>0检查出错了，如果在任何地方都能找到这个词，它总是会通过。

如果你单独检查每个部分的单词，然后应用边框，怎么样？

这是一把小提琴：https://jsfiddle.net/kelvinsusername/k3d2r9xy/5/

我只是稍微更改了JS，所以当循环浏览这些部分时，它会检查单词then：

for (var i = 0; i < n.length; i++) {
var index = n[i].innerHTML.indexOf(text);
if (index > 0) {
n[i].setAttribute("style", "border: 1px solid blue;");
}
}