如何在JSP，HTML中使用Javascript突出显示句子中的所有关键字

Question

通过使用以下语句，我能够突出显示句子中的关键字。 在jsp（html）中：

<P>Keywords</P>
 <div id="keywords">
 <% for (int i=0; i<  HighlightTermList.size();i++){ %>
   <span><%=HighlightTermList.get(i) %><br></span>  
          <%} %> 
</div>

<bar>

<P>Sentence</P>
<div id="sentences">

 <% for (int i=0; i<  SentenceList.size();i++){ %>

<%=SentenceList.get(i) %><br> 
          <%} %> 

</div>  
 <link rel="stylesheet" type="text/css" href="my.css">  
<script type="text/javascript" src="my.js"></script>   

在javascript中：

var sentences = document.querySelector('#sentences');
var keywords = document.querySelector('#keywords');
keywords.addEventListener('click', function(event){
    var target = event.target;
    var text = sentences.textContent;
    var regex = new RegExp('('+target.textContent+')', 'ig');
    text = text.replace(regex, '<span class="highlight">$1</span>');
    sentences.innerHTML = text;
}, false);

在css中：

.highlight {
    background-color: yellow;
}

点击＆＃34; good＆＃34;后，会显示匹配结果。

但是，所有句子都显示在一行中。如何逐行分割句子并突出显示关键词？​​

所以我正在考虑使用该表，将关键字和句子存储在同一个表中。

<table  border="1" width="960px" >
 <tr>

    <th>keywords</th>
    <th>sentence</th>
  </tr>

    <% for (int i=0; i<  HighlightTermList.size();i++){ %>

  <tr>   
      <td> 
        <div id="keywords"><span><%=HighlightTermList.get(i) %></span></div>
       </td>    
     <td>
    <div id="sentences"><%=SentenceList.get(i) %></div>    
     </td>
   <%} %> 

 </table>
 <link rel="stylesheet" type="text/css" href="my.css">  
<script type="text/javascript" src="my.js"></script>

问题是如果我使用表格，高亮功能不起作用。任何人都可以告诉它为什么不能工作？如何改善？感谢。