CODEWITHSUNDEEP
javascriptreactjs
UbuntuNewb
UbuntuNewb

Reputation: 411

How to color only specific parts of the text dynamically

I have a reactjs webapp where I need to show specific color only to selected sentences. I have two states which stores the arrays of sentences that are hard and very hard which we get dynamically from an api. I need to color only the hard and very hard sentences with yellow and red respectively and the rest of the text in default color.

suppose this is the full text 

It's the possibility of having a dream come true that makes life interesting. He stepped down, trying not to look long at her, as if she were the sun, yet he saw her, like the sun, even without looking. I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation. Satan trembles when he sees the weakest saint upon their knees

then the api scans the sentence and sends hard and very hard sentence from the above paragraph

{
  "hard": [
    "It's the possibility of having a dream come true that makes life interesting",
    "I cannot fix on the hour, or the spot, or the look or the words, which laid the foundation.",
  ]
 "very_hard": [
    “He stepped down, trying not to look long at her, as if she were the sun, yet he saw her, like the sun, even 
     without looking.”
  ]
}

this is the code :

 states={
          hardArray: [],
          vhardArray: []
   };

     {enteredText.split(". ").map(word => {
          if (this.state.vhardArray.includes(word)) {
            return <span className="vhardColor">{word}</span>;
          }

          if (this.state.hardArray.includes(word)) {
            return <span className="hardColor">{word}</span>;
          }

          return [word, ". "];
        })}

however when the check the DOM elements, there is no span tag around the hard and very hard sentences so most likely the css wasn't assigned to them. How do I assign the css correctly?

Upvotes: 1

Views: 593

Answers (2)

xdeepakv
xdeepakv

Reputation: 8135

Instead of using split, i will recommend you to use replace and regex. it is more flexible and permanent. You have to loop once.

It can be simplified as below sample, You can use in JSX removing "". Lazy to setup react project or stackbliz

    const vtext = [":D", ";)"]
    const htext = [":>"]
    const compileEmoji = (emj) => {
        if(vtext.indexOf(emj) > -1) return '<span class="vtext">{emj}</span>'
        if(htext.indexOf(emj) > -1) return '<span class="htext">{emj}</span>'
        return emj
    }
    const buildEmoji = (text = "") => {
        return text.replace(/(\S+)(\s+)/g, function(w, mat1, mat2) {
            return `${compileEmoji(mat1)}${mat2}`
        })
    }
    console.log(buildEmoji("This is something :> new :D hu hahaha ;) "))

Upvotes: 2

Michael
Michael

Reputation: 5048

You can dynamically add the css to the document something like:

let vhardColor = document.createElement('style');
        vhardColor.innerHTML = `
          .vhardColor { 
            color: blue;
         } `;
        document.head.appendChild(vhardColor);

Upvotes: 0

Related Questions