0

I am curently working on one visualization, using JavaScript, which should deal with large amount of text. In each sentence there are at least couple of words which I need to color, which means that a single sentence would look something like that:

"Word word word coloredWord word word coloredWord coloredWord word...".

Currently for each part without coloredWord I am creating a span element and appending a text node to it. And also each coloredWord is put in one span (I am using spans to be able to set classNames). However it takes too long to display it.

I have tried to use fragment and also to first set the div.style.display to "none" till all nodes are created. But I could not see any difference. Is there maybe another way how to display such a text where huge part of it needs to be colored in different colors?

Rita
  • 41
  • 1
  • 3
  • 1
    you are not saying anything. Please provide code and ask a real question. For what I could decipher, why would you be using spans in the noncolored words? just use span on the colored words. – monxas Jun 08 '15 at 14:43
  • 1
    Can you share your code, perhaps in a JSfiddle? https://jsfiddle.net/ IT would be helpful to see your code to see if something is slowing this down or could be optimized at all. – neilsimp1 Jun 08 '15 at 14:43
  • did you try this ? [link] (http://stackoverflow.com/questions/10729983/highlight-word-in-html-text-but-not-markup) – 4nti Jun 08 '15 at 14:44
  • Hey, thanks, I was really creating too many spans which made huge difference in the performance. I was actually using them to get the selected sentence in another visualization (cloning it), but I will change better the other visualization. Now the performance for this one is acceptable. :) – Rita Jun 08 '15 at 15:44

1 Answers1

2

As @monxas mentioned you could use spans inline like so

<p>Test test <span>colored</span> test test </p>

css

span{
    color:red;
}
depperm
  • 10,606
  • 4
  • 43
  • 67