通过for循环功能分析和匹配带有单词的注释

Question

所以我也想分析第一个已经插入的注释，并用注释匹配这四个单词（如果匹配，注释将以蓝线为界）。问题是，当我想匹配它们时，出现了问题。该函数将忽略第一个注释，并显示inpuText.textContent错误。当我添加新评论时，我想将该新评论与可以正常工作的新插入单词进行匹配。最终过程是：提取所有单词（已经存在或输入单词），所有注释并匹配它们，而与注释和单词的数量无关。

function myFunction() {
  document.getElementById("myForm").reset();
}


function createparagraph() {
  var commentdiv = document.createElement("div");
  commentdiv.id = "comment";
  commentdiv.className = "col-md-12 bordered commentdiv"
  var imagediv = document.createElement("div");
  imagediv.id = "imagediv";
  imagediv.className = "col-md-2 bordered logo";
  var logoimg = document.createElement("img");
  logoimg.id = "logoimage";
  logoimg.setAttribute("src", "logo.jpg");
  var paragraphdiv = document.createElement("div");
  paragraphdiv.id = "paragraphdiv"
  paragraphdiv.className = "col-md-10 para bordered paragraphdiv";
  var inputtext = document.getElementById("textarea").value;
  var createp = document.createElement("P");
  createp.className = "commentpgraph";
  createp.id = "commentparagraph";
  var it = document.createTextNode(inputtext);
  var area = document.getElementById("pgraf");
  createp.appendChild(it);
  commentdiv.appendChild(imagediv);
  commentdiv.appendChild(paragraphdiv);
  paragraphdiv.appendChild(createp);
  imagediv.appendChild(logoimg);
  document.getElementById("commentsec").appendChild(commentdiv);
  var list = document.getElementsByClassName("commentdiv");
  for (var i = 0; i < list.length; i++) {
    list[i].setAttribute("id", "comment" + i);
  }
  var pgraph = document.getElementsByClassName("commentpgraph");
  for (var i = 0; i < pgraph.length; i++) {
    pgraph[i].setAttribute("id", "commentparagraph" + i);
  }
  var paragraphdiv = document.getElementsByClassName("paragraphdiv");
  for (var i = 0; i < paragraphdiv.length; i++) {
    paragraphdiv[i].setAttribute("id", "paragraphdiv" + i);
  }
  myFunction();

}

function listFunction() {
  document.getElementById("listForm").reset();
}

function creatediv() {
  var newdiv = document.createElement("div");
  newdiv.id = "blacklisttab" + i;
  newdiv.className = "col-md-10 col-md-offset-1 bordered bl blacklisttab";
  var innerdiv = document.createElement("div");
  innerdiv.id = "torles";
  innerdiv.className = "col-md-10 bordered selectborder fragment";
  var newspan = document.createElement("span");
  newspan.id = "closebutn";
  newspan.onclick = function() {
    this.parentNode.style.display = 'none';
  };
  newspan.innerHTML = "x";
  var textdiv = document.createElement("div");
  textdiv.id = "blacklistitem";
  textdiv.className = "blacklistitem";
  var inputtext = document.getElementById("littletext").value;
  var createp = document.createElement("P");
  createp.className = "blacklistitempgraph";
  createp.id = "blacklistitempgraph";
  var it = document.createTextNode(inputtext);
  var area = document.getElementById("blacklistitem");
  newdiv.appendChild(innerdiv);
  innerdiv.appendChild(newspan);
  innerdiv.appendChild(textdiv);
  createp.appendChild(it);
  textdiv.appendChild(createp);
  document.getElementById("blacklist").appendChild(newdiv);
  var tabs = document.getElementsByClassName("blacklisttab");
  var items = document.getElementsByClassName("blacklistitem")
  var blacklistitempgraph = document.getElementsByClassName("blacklistitempgraph");
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].setAttribute("id", "blacklisttab" + i);
    items[i].setAttribute("id", "blacklistitem" + i);
    blacklistitempgraph[i].setAttribute("id", "blacklistitempgraph" + i);
  }
  listFunction();

  bordering1();

}

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

    }
  }
};

.abutton {
  padding: 10px;
}

.para {
  padding-bottom: 25px;
}

.textarea {
  padding-top: 25px;
}

.fragment {
  font-size: 12px;
  font-family: tahoma;
  height: 20px;
  border: px solid blue;
  color: blue;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}

#close {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

.bl {
  padding-bottom: 5px;
}

.closebtn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

#textarea {
  resize: none;
  outline: none;
  background: url(bc.jpg) center center no-repeat;
  border: 1px solid rgba(0, 0, 0, .3);
}

.textplace {
  word-wrap: break-word;
}

#littletext {
  resize: none;
  outline: none;
  background: url(bc.jpg) center center no-repeat;
  border: 1px solid rgba(0, 0, 255, .3);
}

#closebutn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

.highlight {
  border-style: solid;
}

#commentsec {
  font-weight: bold;
}

<div class="col-md-4 col-md-offset-1 bordered blacklist listform">
  <div class="col-md-12 bordered blacklist" id="blacklist">
    <div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="listtab">
      <div class="col-md-10 bordered selectborder fragment" id="bltab">
        <span onclick="this.parentNode.style.display = 'none';" class="closebtn">x</span>
        <div class="blacklistitem" id="blacklistitem">
          <p class="blacklistitempgraph" id="blacklistitempgraph">DNFB</p>
        </div>
      </div>
    </div>
    <div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="listtab">
      <div class="col-md-10 bordered selectborder fragment" id="bltab">
        <span onclick="this.parentNode.style.display = 'none';" class="closebtn">x</span>
        <div class="blacklistitem" id="blacklistitem">
          <p class="blacklistitempgraph" id="blacklistitempgraph">HIM</p>
        </div>
      </div>
    </div>
    <div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="listtab">
      <div class="col-md-10 bordered selectborder fragment" id="bltab">
        <span onclick="this.parentNode.style.display = 'none';" class="closebtn">x</span>
        <div class="blacklistitem" id="blacklistitem">
          <p class="blacklistitempgraph" id="blacklistitempgraph">CFO</p>
        </div>
      </div>
    </div>
    <div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="listtab">
      <div class="col-md-10 bordered selectborder fragment" id="bltab">
        <span onclick="this.parentNode.style.display = 'none';" class="closebtn">x</span>
        <div class="blacklistitem" id="blacklistitem">
          <p class="blacklistitempgraph" id="blacklistitempgraph">Reduce</p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-8 col-md-offset-1 bordered">
    <form id="listForm">
      <textarea name="littletext" id="littletext" rows="1" style="width: 105%;"></textarea>
    </form>
  </div>
  <div class="col-md-2 col-md-offset-1 bordered">
    <input type="Submit" name="Submit" id="Submit" value="Submit" onclick="creatediv()">
  </div>
</div>
</div>
<div class="col-md-12 bordered bottom">
  <div class="col-md-8 col-md-offset-2 bordered commentsec" id="commentsec">
    <div class="col-md-12 bordered commentdiv" id="comment">

      <div class="col-md-10 para bordered paragraphdiv" id="paragraphdiv">
        <p class="commentpgraph" id="commentparagraph">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>
  <div class="col-md-8 col-md-offset-2 bordered textarea">
    <form id="myForm">
      <textarea id="textarea" style="width: 100%;" cols="30" rows="5"></textarea>
    </form>
  </div>
  <div class="col-md-2 col-md-offset-8 bordered abutton">
    <center><input type="Submit" id="button1" value="Submit" onclick="createparagraph();"></center>
  </div>
</div>