I am creating an object marker so that I can load a text file, view the contents on the screen, and then select the words that are in the array. This array is populated by the user when they manually highlight the selection, for example ...
const entities = ['John Smith', 'Apple', 'some other word'];
This is my text document that is displayed on the screen. It contains a lot of text, and some of this text needs to be visually highlighted to the user once they manually highlight some text, like the name John Smith, Apple and some other word
Now I want to visually highlight all instances of the object in the text, packing it into some markup, and doing something like this works fine:
getFormattedText() {
const paragraphs = this.props.text.split(/\n/);
const { entities } = this.props;
return paragraphs.map((p) => {
let entityWrapped = p;
entities.forEach((text) => {
const re = new RegExp(`${text}`, 'g');
entityWrapped =
entityWrapped.replace(re, `<em>${text}</em>`);
});
return `<p>${entityWrapped}</p>`;
}).toString().replace(/<\/p>,/g, '</p>');
}
... however (!), it just gives me a big line, so I have to dangerously set the internal HTML, and therefore I cannot then attach the onClick event "React Method" to any of these selected objects, which I have to do.
The real way to do this is to return an array that looks something like this:
['This is my text document that is displayed on the screen. It contains a lot of text, and some of this text needs to be visually highlighted to the user, like the name', {}, {}, {}]
{}
- React, JSX.
, , , , , .
, ... ? , , . , React SetInnerHTML, , DOM?
Update
@AndriciCezar , , , , ( > 100), ( > 100kb). 10 , V .
- , , React ? SetInnerHTML ?