可编辑div中的n克突出显示

我的问题不是关于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(/[-[\]{}()*+?.,"");
                            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(/[-[\]{}()*+?.,"");
                            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时,都不会突出显示。我希望所有克都突出显示,即使重叠的也一样。如何修改我的正则表达式,以便可以正确显示突出显示。

xinchengsoft 回答:可编辑div中的n克突出显示

好的,这是我的第一个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

本文链接:https://www.f2er.com/3031323.html

大家都在问