我的问题不是关于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时,都不会突出显示。我希望所有克都突出显示,即使重叠的也一样。如何修改我的正则表达式,以便可以正确显示突出显示。