I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this:
"The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sitting room with two layers of glass as well as a warehouse filled with mutton and ghee ."
Along with an array of objects:
entities: [
{
"entity_type": "PERSON",
"index": [
18,
26
],
"namedEntity": "Ci Suo 's"
},
{
"entity_type": "CARDINAL",
"index": [
69,
69
],
"namedEntity": "5"
},
{
"entity_type": "CARDINAL",
"index": [
130,
132
],
"namedEntity": "two"
}
]
My goal is to format it in the following way: https://i.sstatic.net/QW41M.png
Here's what I've attempted so far:
const find = entities; // word to highlight
let str = text; // contain the text i want to highlight
for (let i = 0; i < find.length; i++) {
str = str.replace(new RegExp(find[i], "g"), match => {
const color = randomColor();
return `<span style="background: ${color}">${match}</span>`;
});
}
However, this approach has led to some issues such as
- the later tags can be matched in the next iteration if I have a word like "an"
- two same words get the same label
If you have any alternative methods or suggestions that could help, I would greatly appreciate it. Thank you!