仅对输入单词匹配的那段使用正当性边界函数

Question

So, i want to border the correct paragraph's div, when i input a word like "Security" for example, and then the 3rd, the "comment2" div will be bordered. What i would like: Only the respective div needs to be bordered, where the word appearing. The function is working, but the problem is that all the divs are bordered after i submit the matching word.

 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

I think you kind of had it, it was the index > 0 check going wrong which would always pass if the word was found anywhere.

How about if you check each section individually for the word and then apply the border then?

Here's a fiddle: https://jsfiddle.net/kelvinsusername/k3d2r9xy/5/

I just changed the JS a bit so when looping through the sections it checks for the word 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;");
     }
  }