javascript - contenteditable div 中的 n gram 突出显示

Question

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

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

文本输入:

欢迎学习食品微生物学和食品安全类(class)。我是xyz博士，本类(class)的协调员，该类(class)是在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>

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

Answer 1

好的，这是我的第一个 JavaScript 代码片段。

var regex = /\b(?:food(?: (?:microbiology|safety))?|microbiology and food)\b/gi
var div = $("#sentence1")
div.html(
  div.text().replace(
    regex,
    function(match) {
      return '<span data-term="T: ' +
             encodeURIComponent(
               match.replace(' ', '').toLowerCase()
             ) + '" class="grams">' + match + '</span>';
    }
  )
);
$('.grams').hover(
  function() {
    var pp = $(".popup")
    pp.show('17042');
    var p = $(this).position();
    pp.css({
        top: (p.top + 30) + "px",
        left: (p.left) + "px"
    });
    var showtext = $(this).attr('data-term');
    pp.html(decodeURIComponent(showtext));
  },
  function() {$(".popup").hide('17042');}
);

.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>

有关我使用的正则表达式的说明，请访问 RegEx101 .