Regex newbie here! Lets say i have two arrays of text and I am searching through a text which says.
let text = This is a cool story.
I am looking for these phrases in the text.
ArrBlue = ["cool story"]
ArrGreen = ["This is a cool"]
And i want to highlight words in the array with the corresponding color. So all the words in ArrBlue will result in text that is blue and ArrGreen in green. I created two new RegExp like so..
let regexBlue = new RegExp(arrBlue.join('|'), "ig)
let regexGreen = new RegExp(arrGreen.join('|'), "ig)
and then i use these new variables to then replace text like so attaching a span tag to the beginning and end of the matched expression.
let newText = text.replace(regexBlue, "<span class='blue'>$&</span>")
.replace(regexGreen, "<span class='green'>$&</span>")
The issue that i am having is I want my html to look like so..
<span class="blue">This is a<span class="green" cool story </span> </span>
But in actuality what im getting is
This is a <span class="green">cool story</span>
Heres my quick snippet to better understand my situation.
let greenListArray = ["cool story"];
let blueListArray = ['This is a cool'];
$("#myform").submit(function(event){
event.preventDefault();
$('#results').html('');
let text = $('textarea#textEntered').val();
highlightText(text);
});
function highlightText(text){
let regexGreen = new RegExp(greenListArray.join('[,!?.]?|'), "ig");
let regexBlue = new RegExp(blueListArray.join('[,!?.]?|') + "ig");
let newText = text.replace(regexGreen, "<span class='green'>$&</span>")
.replace(regexBlue, "<span class='blue'>$&</span>");
$('#results').html(newText);
}
.blue{
background-color: red;
font: red;
}
.green{
background-color: green;
}
.greyHighlight:hover{
background-color: grey;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<fieldset>
<textarea name='textEntered' id='textEntered' />This is a cool story.</textarea>
<button type='submit' class="bttn">Enter</button>
</fieldset>
</form>
<div class="results-container"> <span class="results-title">Highlighted Text:</span> <div id="results"> </div> <br> </div>
<div class="wantedResults">
Results I wish to have <br>
<span class="blue">This is a</span><span class="green">cool story</span>
</div>
This works for basic implementation. Overlapping more than 2 times will not work properly. And also need to handle white spaces.
var arr = [
{str:"cool story",
color: "green"},
{str:"This is a cool",
color: "blue"},
{str:"two best friends",
color: "red"},
{str:"about two best",
color: "yellow"},
];
$("#myform").submit(function(event){
event.preventDefault();
$('#results').html('');
let text = $('textarea#textEntered').val();
highlightText(text);
});
function highlightText(text)
{
for(var index=0;index<arr.length;index++)
{
var matches=text.match(arr[index].str.split(" ").join("\\s*(<.*>)*\\s*"));
if(matches)
{
for(var i=1;i<matches.length;i++)
{
if(!matches[i]) continue;
if(matches[i].indexOf("/")==-1)
{
text = text.replace(matches[0],matches[0].replace(matches[i],"")+matches[i]);
}
else
{
text = text.replace(matches[0],matches[i]+matches[0].replace(matches[i],""));
}
}
}
text = text.replace(arr[index].str, "<span class='"+arr[index].color+"'>$&</span>");
}
$('#results').append($(text))
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.grey{
background-color: grey;
}
.greyHighlight:hover{
background-color: grey;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<fieldset>
<textarea name='textEntered' id='textEntered'>This is a cool story about two best friends.</textarea>
<button type='submit' class="bttn">Enter</button>
</fieldset>
</form>
<div class="results-container"> <span class="results-title">Highlighted Text:</span> <div id="results"> </div> <br> </div>
<div class="wantedResults">
Results I wish to have <br>
<span class="blue">This is a</span><span class="green">cool story</span>
</div>