n在内容可编辑的div中高亮显示

Question

我的问题不是关于n克提取，而是突出显示内容可编辑div中的1/2/3/4 / g。

我有一个div和一些文本。 n克是从后端提取的，这些克要在div中突出显示。我能够做到这一点，但是当克相互重叠时，即当两个单词克是另一个3单词克的正则表达式时，正则表达式无法突出显示这些。

文本输入

：

欢迎参加食品微生物学和食品安全课程。我是本课程的协调员xyz博士，该课程是在pqrs教授的指导下设计的。

要高重的克

：

微生物学和食品食品微生物学

食品安全

食物

到目前为止，这是我试图实现的目标

var array3 = ["microbiology and food"];
var array2 = ["food microbiology","food safety"];
var array1 = ["food"];

var text = $("#sentence1").text();
//console.log(text);
//console.log(array);

for (var i=0;i<array3.length;i++) {
   var key = array3[i];
   key = key.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&");
   var regex = new RegExp("(^|\\s)" + key + "(\\s|<\\/span>|$|,|\\.|”|\")", "ig");

   text = text.replace(regex, function(match) {
                            match = match.replace(/^\s/g, "");
                            match = match.replace(/\s$/g, "");
                            return ' <span title="" data-term="T: ' + encodeURIComponent(key) + '"                              class="grams">' + match + '</span> ';
                        });            
}
for (var i=0;i<array2.length;i++) {
   var key = array2[i];
   key = key.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&");
   var regex = new RegExp("(^|\\s)" + key + "(\\s|<\\/span>|$|,|\\.|”|\")", "ig");

   text = text.replace(regex, function(match) {
                            match = match.replace(/^\s/g, "");
                            match = match.replace(/\s$/g, "");
                            return ' <span title="" data-term="T: ' + encodeURIComponent(key) + '"                              class="grams">' + match + '</span> ';
                        });            
}
for (var i=0;i<array1.length;i++) {
   var key = array1[i];
   key = key.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&");
   var regex = new RegExp("(^|\\s)" + key + "(\\s|<\\/span>|$|,|\\.|”|\")", "ig");

   text = text.replace(regex, function(match) {
                            match = match.replace(/^\s/g, "");
                            match = match.replace(/\s$/g, "");
                            return ' <span title="" data-term="T: ' + encodeURIComponent(key) + '"                              class="grams">' + match + '</span> ';
                        });            
}
$("#sentence1").html(text);

$(document).on("mouseover", "span.grams", function(event) {
 $(".popup").show(200);
    var p = $(this).position();
    $(".popup").css({
        top: (p.top + 30) + "px",
        left: (p.left) + "px"
    });
    //console.log(p.left + p.top);
    var showtext = $(this).attr("data-term");
    showtext = showtext.replace(/<\/sent>/g, "");
    showtext = showtext.replace(/<sent>/g, "");
    $(".popup").html(decodeURIComponent(showtext));

});
.grams{
 color:#1974db;
    cursor:pointer;
}
.grams:hover {
    text-decoration:underline;
}

.popup {
      z-index: 1000;
  position: absolute;
  cursor: pointer;
  /*position:relative;
  top:25vh;
  left:25vw;*/
  width:auto;
  background-color:#EFF1F3;
  color:black;
  font-size:15px;
  -khtml-opacity:0;
  -moz-opacity : 0;
  -ms-filter: "alpha(opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter : alpha(opacity=0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="sentence1" class="grid" contenteditable="true">
Welcome to MOOC on Food Microbiology and Food Safety. I am Dr. xyz, Coordinator of this course, which is designed under the guidance of Prof. pqrs.
</div>


<div style="display:none;" class="popup">
</div>

正如我们在代码中看到的那样，当我们运行数组中的所有g时，都不会突出显示。我希望所有克都突出显示，即使重叠的也一样。如何修改我的正则表达式，以便可以正确显示突出显示。

我的问题不是关于n克提取，而是突出显示内容可编辑div中的1/2/3/4 /克。我有一个div和其中的一些文字。从后端提取了n克，这些克应为...

Answer 1

[好，这是我的第一篇JavaScript帖子。