How to use bordering only for that divs content in which the input word is matching?

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

Your <div id="commentsec"> innerHTML contains the whole text (all <div class="commentdiv"> childs), so when you loop over each of them, the value of index isn't updated regarding each content:

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

Also, it will be safer to test for (index!=-1) rather than (index>0), as you could possibly get in situation where the innerHTML text start at index 0 (if there's no tag, space or new line before the text itself) and add an else clause to remove the 'style' attribute

Answer 2

I also modified the first line of your function to test it with an <input type="text" id="texthere"> field, as you don't provide any element with id "texthere" in your code sample...

Safer also:

> use textContent instead of innerHTML to get only text content rather than html content (imagine you search for "security" but the innerHTML contains "<b>s</b>ecurity", you will not get match)
> use toLowerCase() to convert both the search text value and the element content to be case insensitive (to match "Security" when you search "security" for example)... or look at regular expression, 'i' flag and test() method

Answer 3

Lot of Thanks to You! You helped me a lot with this two comment. Thank You!