n gram highlighting in contenteditable div

My question is not about n gram extracting rather highlighting 1/2/3/4/ grams in content editable div.

I have a div and some text in it. n grams are fetched from back end, these grams are to be highlighted in the div. I am able to do this but when grams are overlapped with each other i.e when a two word gram is part of another 3 word gram regex fails to highlight these.

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.

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

from n gram highlighting in contenteditable div