javascript - 可编辑div中的n克突出显示(n gram highlighting in contenteditable div)

Question

(The bounty expires in 7 days) . ((赏金将 在7天后过期) 。) Answers to this question are eligible for a +100 reputation bounty. (这个问题的答案有资格获得+100声望奖励。) Nagaraju - Reinstate Monica wants to (draw more attention) to this question: The answer that already exists here changes the content. (Nagaraju-恢复Monica希望(引起更多)关于这个问题的(注意) ：这里已经存在的答案改变了内容。) But I want the content to remain as is and all the n grams in array should be highlighted with bigger one first ans so on. (但是我希望内容保持原样，并且数组中的所有n克都应使用较大的第一个ans突出显示，依此类推。)

My question is not about n gram extracting rather highlighting 1/2/3/4/ grams in content editable div.(我的问题不是关于n克提取，而是在内容可编辑div中突出显示1/2/3/4 / g。)

I have a div and some text in it.(我有一个div和其中的一些文字。)

n grams are fetched from back end, these grams are to be highlighted in the div.(n克是从后端提取的，这些克要在div中突出显示。) I am able to do this but when grams are overlapped with each other ie when a two word gram is part of another 3 word gram regex fails to highlight these.(我能够做到这一点，但是当克彼此重叠时，即当两个单词克是另一个3单词克的一部分时，正则表达式无法突出显示这些。)

Text Input :(文字输入 ：)

Welcome to course on Food Microbiology and Food Safety.(欢迎参加食品微生物学和食品安全课程。)

I am Dr. xyz, Coordinator of this course, which is designed under the guidance of Prof.pqrs.(我是本课程的协调员xyz博士，该课程是在pqrs教授的指导下设计的。)

Grams to be highlgihted :(克重 ：)

microbiology and food food microbiology(微生物学与食品食品微生物学)

food safety(食品安全)

food(餐饮)

So far this is what I had tried to achieve the same(到目前为止，这是我试图实现的目标)

 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> 

As we can see in the code when we run all the grams in array are not being highlighted.(正如我们在代码中看到的那样，当我们运行数组中的所有g时，都不会突出显示。)

I want all the grams to be highlighted even the overlapping ones.(我希望所有克都突出显示，即使重叠的也一样。) How can I modify my regex so that I can show the highlighting properly.(如何修改我的正则表达式，以便可以正确显示突出显示。)   ask by Nagaraju - Reinstate Monica translate from so

Answer 1

Ok, this is my first JavaScript code snippet.(好的，这是我的第一个JavaScript代码段。)

 var regex = /\b(?:food(?: (?:microbiology|safety))?|microbiology and food)\b/gi var text = $("#sentence1").text().replace( regex, function(match) { return '<span data-term="T: ' + encodeURIComponent(match.replace(' ', '').toLowerCase()) + '" 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> 

For an explanation of the regex that I use, please go to the RegEx101 . (有关我使用的正则表达式的说明，请转到RegEx101 。)