How can i highlight n sequence string words

Question

This my script to Highlight a specific word from text string my only problem is when I want to highlight three sequence words it just the 1st word highlighted then 2nd still without highlight then the third one it is highlighted

The * its a truncation and works well

This an Example to highlight n sequence words:

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need to highlighte "reference" "is" "to" "serve" "test*" (n sequnence words)

var wordsToHighlight = 'reference is to serve test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  word = word.replace(/\*/g, '\\S*');
  result = result.replace(new RegExp('((?:\\s|^)' + word + '(?:\\s|$))', "g"),'<span style="color: red;">$1</span>');
});
document.querySelector("#result").innerHTML = result;

<div id="result"></div>

My object is to highlights all the words in the paragraph

looking for your suggestion.

Could you give an example of the desired output, I'm having trouble understanding your question. — DBS
– DBS, Commented Feb 19, 2018 at 11:47
@DBS you can my example by clicking on RUN code snippet its contain an example — MokiNex
– MokiNex, Commented Feb 19, 2018 at 12:33
@DBS I want to highlight all the words as an example 'reference is to serve test*' in the paragraph. (*) it's a truncation — MokiNex
– MokiNex, Commented Feb 19, 2018 at 12:59
Try result.replace(new RegExp('(\\s|^)(' + word + ')(?=\\s|$)', "g"),'$1$2') — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 19, 2018 at 13:15
thanks! but you need to add the third argument result = result.replace(new RegExp('(\\s|^)(' + word + ')(\\s|$)', "gi"),'$1$2$3'); — MokiNex
– MokiNex, Commented Feb 19, 2018 at 13:47

Chris Satchell · Accepted Answer · 2018-02-19 12:04:49Z

2

The reason why it's only highlighting every second word lies in the regex and the replacement string. Your regex matches every occurrence preceded and followed by a whitespace.

So <whitespace>word<whitespace> gets replaced with word, which works fine.

Now say we have <whitespace>word<whitespace>word<whitespace>. After the first run we have wordword. As there is no whitespace before the second word, the regex can't match it.

A simple solution would be to surround your replacement string with whitespaces, but that still leaves us with 'reference' failing, but that is due to the regex itself.

answered Feb 19, 2018 at 12:04

Chris Satchell

7495 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wiktor Stribiżew · Accepted Answer · 2018-02-19 13:54:56Z

1

You should convert the last whitespace matching group pattern into a non-consuming pattern, a positive lookahead:

result = result.replace(new RegExp('(\\s|^)(' + word + ')(?=\\s|$)', "g"),'$1<span style="color: red;">$2</span>');

For example, the pattern with a test word will look like /(\s|^)(test)(?=\s|$)/ and will allow (\s|^) to match the whitespace that was tested with (?=\s|$) during the previous match.

There will only be 2 capturing groups, so the replacement should be '$1$2': the first $1 will insert the leading whitespace (if captured) and the $2 will insert the word matched.

See the JSFiddle:

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need to highlighte "reference" "is" "to" "serve" "test*" (n sequnence words)

var wordsToHighlight = 'reference is to serve test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  word = word.replace(/\*/g, '\\S*');
  result = result.replace(new RegExp('(\\s|^)(' + word + ')(?=\\s|$)', "g"),'$1<span style="color: red;">$2</span>');
});
document.querySelector("#result").innerHTML = result;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

answered Feb 19, 2018 at 13:54

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

4 Comments

MokiNex Over a year ago

do you have an idea how to do interrogation point also as a truncation feature ?= one character (e.g. nurse? --> nurses, nursed, ...) or (for two characters e.g. te??-->test, teen)

Wiktor Stribiżew Over a year ago

@MokiNex You need to replace ? with .: word = word.replace(/\*/g, '\\S*').replace(/\?/g, '.');. However, you should think of a way to allow users to enter a literal ? and * symbols.

MokiNex Over a year ago

there only one issue in this expression one i have a row contain whitespace for example (" reference is to serve test" ) in this example it will highlight reference and before the word reference it will add me this me phrase style="color: red;">style="color: red;"> could help me to fix that thank you

MokiNex Over a year ago

I mean if I have 2 whitespaces or more before and after the word that I want to highlight it will be a problem and appear to me that problem

Collectives™ on Stack Overflow

How can i highlight n sequence string words

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related