How to do replacement with Javascript

Question

I need to color some words based on some patterns
For example, I want to color all the words that start or end or contain the pattern *test*

Example: Testing, test, tests, tesdaf

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 a truncation for examaple test* 
var wordsToHighlight = 'reference test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  result = result.replace(new RegExp(word, "g"),'<span style="color: red;">'+word+'</span>');
});
document.querySelector("#result").innerHTML = result;

<div id="result">

<!-- begin snippet: js hide: false console: true babel: false -->

</div>

Normally the word "testing" "Adtest" etc.. it will be all highlighted. I need helps.
looking for your suggestion

You got to turn it into a regular expression with `new regExp()` — epascarello, Feb 15 '18 at 15:06
I remember answering a similar question. Check if it helps: https://stackoverflow.com/a/16239900/1249581. — VisioN, Feb 15 '18 at 15:07
`*` must be replaced by `.*` in regex or else in `test*` it means that the last `t` can be repeated any number of times. However, `.*` won't stop at end of word, so you could use `[^\s]*` instead — Kaddath, Feb 15 '18 at 15:10
if i understand u correctly, look at regex boundaries, it should help. — Vasyl Gutnyk, Feb 15 '18 at 15:11
@VasylGutnyk Word boundaries don't work with non-latin characters (you should know it ;)) — VisioN, Feb 15 '18 at 15:12
@Kaddath do you have an example about that with regex ?.. my input wordsToHighlight needs to be like the code below. — MokiNex, Feb 15 '18 at 15:19
@VisioN honestly, didn't know it:) but u can do smth like string.match(/[\wа-я]/). — Vasyl Gutnyk, Feb 15 '18 at 15:33
@VasylGutnyk Yep, but bloody `\b` set doesn't understand Unicode. — VisioN, Feb 15 '18 at 15:33

Kaddath · Accepted Answer · 2018-02-19T13:02:23.260

1

for a more general way to replace your * in words to match:

NOTE: the code should watch fore more specific regex characters or it could break, for example words with round brackets in it would capture groups, etc. Generally they can be escaped with a \ (just the same way i escaped * in the regex /\*/). In a string you need to double the \, like in '\\S*'

EDIT: added the regex (?:\\s|^) at beginning and (?:\\s|$) at end of words, so that test* doesn't highlight the last part of Adtest but the whole word if it corresponds. (it verifies that there is a space or start/end of string around the word)

EDIT 2: following last comments and the fact that the regex couldn't highlight successive words: it was because the spaces were captured and thus transferred into the span, making it impossible to detect the space for following word. Updated with capturing spaces separately and re-inserting them before and after the span. Added i flag for capitals too.

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 a truncation for examaple test* 
var wordsToHighlight = 'reference test*';
var result = row["Abstract"];

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

wordsToHighlight = 'This is reference *test*';
result = row["Abstract"];

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

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

edited Feb 19 '18 at 13:02

answered Feb 15 '18 at 15:28

Kaddath

5,933
1
9
23

1

You have an error here: the word 'reference' (with the quotation marks) is not highlighted anymore in your code. And the foreach loop is unnecessary and not performant. – Erik Aderhold Feb 15 '18 at 15:56
Thank you for your great work!!. there is a possibility to do that with for with uppercase or lowercase words. for example, I have *Test* it will color all word with "Test" and "test". – MokiNex Feb 15 '18 at 16:00
1

This is actually what i would expect, because we look for `reference`, and not `*reference*` or `'reference'`. If `'` should be added as a special rule, it was not specified.. – Kaddath Feb 15 '18 at 16:00
1

@MokiNex If you want it to be caseinsensitiv (upper and lowercase) you just have to add the `i` flag to the regex as addition to the `g` flag. For example: `new RegExp("test", "gi")` – Erik Aderhold Feb 15 '18 at 16:06
@Kaddath its Possible to do the same thing if have A Regular EXPRESSION like that and color the specific Words? Abbott near/10 (assay* OR test* OR analy* OR *array*)) OR (Abbott p/1 Point P/1 Care) OR ARCHITECT OR (CELL p/0 DYN)) OR ((Alere near/10 (assay* OR test* OR analy* OR *array*)) OR (Alere NEAR/5 (Triage P/1 System)) OR INRatio OR Afinion) OR ((Beckman* p/1 Coulter near/10 (assay* OR test* OR analy* OR *array*)) OR ((Beckman* p/0 Coulter) near/2 AU????) ) – MokiNex Feb 16 '18 at 12:52
@MokiNex this is going to be quite more complex (if i understood correctly what you ask), basically you have to decompose your expression at brackets to recompose the regex with the alternatives (even if actually i don't know why you add brackets when you have only `OR`, they shouldn't be needed). Also are the parts with `near/10` to be highlighted or do they mean something else? I don't have the time now unfortunately, i'll try when i can. – Kaddath Feb 16 '18 at 13:22
@Kaddath basically, i have this expression and from this expression, I want to highlight specific words based on regexp. for bracket it an expression strategy to get some data from Database. "near/10" mean Find Ten Words Near Each Other. – MokiNex Feb 16 '18 at 13:30
haha you're messing with my brain, sorry, having a hard day! Is it like i first thought, that you want to use this long expression to highlight words from another string, or do you want to be able to highlight words in this expression, based on the present code? (second one is much easier) – Kaddath Feb 16 '18 at 13:43
@Kaddath in your last script why I cant highlight two or three words in series for exp: var wordsToHighlight = 'This reference is test*'; here the 1st word he will be highlighted the 2nd still without then the third one it is highlighted. – MokiNex Feb 19 '18 at 11:24
@MokiNex added the correction for your last comment because it was easy, still had no time for the more complex stuff – Kaddath Feb 19 '18 at 13:04
@Kaddath in my case BIRT JAVASCRIPT doesn't recognize $2 $3 it still the same result no effect – MokiNex Feb 19 '18 at 13:27
1

Have you updated the regex construction too? round brackets have moved and the `?:` has been removed, so it changed from `RegExp('((?:\\s|^)' + word + '(?:\\s|$))` to `RegExp('(\\s|^)(' + word + ')(\\s|$)` – Kaddath Feb 19 '18 at 13:31

Erik Aderhold · Answer 2 · 2018-02-15T15:29:49.603

You do not have to loop if you are using a good regex and replace syntax ($1). This will do the job:

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 a truncation for examaple test* 
var wordsToHighlight = new RegExp(/(reference|\S*test\S*)/, 'g');
var result = row["Abstract"];

result = result.replace(wordsToHighlight,'<span style="color: red;">$1</span>');

document.querySelector("#result").innerHTML = result;

<div id="result">

</div>

Explanation for the RegEx:

/(reference|\S*test\S*)/

the slashes / mark beginning and end of the regex syntax
the round brackets (and ) form a group which is referenced later with $1 (first group)
the pipe | is an OR - so we have reference or \S*test\S*
\S means everything except whitespaces
* means 0 or more times - so we have non-whitespace(0 to n times) followed by the charsequence 'test' followed by non-whitespace(0 to n times)

We replace the matches by the <span> with the matched first group ($1) inside the span

How to do replacement with Javascript

2 Answers2