Loading...

Create a sentence containing keywords with a specific CSS with JavaScript


I would like to form a sentence. However, in this sentence there are keywords that contain a specific CSS, according to a word dictionary contained in a JSON.

I don't know how to take into account the CSS of dictionary words and the rest of my sentence to display it correctly.

For example, I get a sentence with:

I have a problem with my network cable....

Problem being in my dictionary in a JSON file I want it to get a specific CSS. Problem should appear in red.

I can only display keywords. I don't see how to reconstruct my sentence.

        for (let i = 0; i < features.length; i++) {
            for (let j = 0; j < newDataLime.length; j++) {
                if (features[i] === newDataLime[j].label) {
                    console.log(newDataLime[j].rgba);
                    spanCounter ++ 
                    // Max 12 span by each line for ver
                    if(spanCounter == 12){
                        spanCounter = 0;
                    }
                       fieldText.innerHTML = fieldText.innerHTML +  `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
                    }
                }
            } 

Features is a table that contains all the words in my sentence cut to each space. So it contains for our example ["I", "Have", "Problem" ... etc.]

And the variable newDataLime contains the keywords of the dictionary.

How can I correctly form my sentence?

I hope I have been clear enough. Thank you in advance!

- - Source

Answers

answered 1 week ago André DS #1

You should try to replace the word in your sentence array, with the stylized word.

And then, when your array is fully computed, you'll be able to put it in any DOM element :

for (let i = 0; i < features.length; i++) {
  for (let j = 0; j < newDataLime.length; j++) {
    if (features[i] === newDataLime[j].label) {
      console.log(newDataLime[j].rgba);
      spanCounter++
      // Max 12 span by each line for ver
      if (spanCounter == 12) {
        spanCounter = 0;
      }
      features[i] = `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
    }
  }
}

fieldText.innerHTML = features.join(" ");

comments powered by Disqus