How to change the color / size of a single word in the text? Is it possible? Maybe through regular expressions?

Closed due to the fact that the question is too common for participants Streletz , dirkgntly , aleksandr barakin , pavel , user207618 Aug 28 '16 at 6:37 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • via css only - popp
  • stuff this word into the <span> </ span> element and ask what you need. regular expressions are for javascript. - Dimon

3 answers 3

In the general case, by means of only CSS, this cannot be done. (At least I don’t know how to do this at the time of writing this comment).

This is because CSS rules operate on DOM entities (and a small set of entities in non-incoming DOM — pseudo-elements). There is no such thing as a single word in DOM.

Yes, there are no regular expressions in CSS either. Because they are not needed there, the language of selectors for problems solved by CSS is enough.

“Solved by pure css” is only if the text is static, does not change, there’s no need to search for anything and you stupidly hang hands on the word <span> and then paint it with cs.

So if we want a strange one, go ahead and learn javascript.

    Well, let's say this:

     function i1(i1, i2, i3) { var i4 = document.getElementById("text"); i4.innerHTML = i4.innerHTML.replace(i1, "<span style=\"color: " + i2 + "; font-size: " + i3 + "px;\">" + i1 + "</span>"); return; } 
     <span id="text">Моё новое предложение</span> <br /> <br /> <button onclick="javascript: i1('Моё', '#AAA', '12');"> Чёрный, 12 пикселей </button> <br /> <br /> <button onclick="javascript: i1('новое', '#F00', '48');"> Красный, 48 пикселей </button> <br /> <br /> <button onclick="javascript: i1('предложение', '#FFF', '16');"> Белый, 16 пикселей </button>

    Here is an example on JSFiddle.

    • And now compare the code in fiddle and in the answer. Minus until you fix it. - Qwertiy ♦
    • @Qwertiy, what an important detail. Corrected the code in question. Just when this JSFiddle caused problems: ru.stackoverflow.com/questions/559895/… and I had to change something. - nick
    • Removed minus. But 1. In onclick you should not write javascript: 2. using the onclick attribute is not good. 3. return extra. 4. And generally, mono was to make a snippet - Qwertiy ♦
    • @Qwertiy, points 1, 2 and 3 - why? Maybe he has not only Javascript on the page. Why is onclick bad? return always add return everywhere, it doesn't hurt anything. Although you can remove it, but nothing will change from that. And how I cannot do snippets, I did not find it. - nick
    • 1. The handler contains a piece of code. And the code has no protocol. Javascript protocol javascript: parsed as a protocol only in href. And in onclick it turns into a label in the code. And it seems that some browsers did not know how to handle this correctly. 2. Just a bad style. It requires the presence of all handlers in the global space, respectively, it is cluttered and the risk of accidental intersections with other scripts increases. Although not an example for example. But if the handler were added from the code, then there would be no problems with an idle fiddle. 3. If there is no difference, why write more? 4. Button Fragment code. - Qwertiy ♦

    On js like this, on the condition that you know how many words :

     var container = document.querySelector(".symbols"); var str = container.innerHTML; container.innerHTML = str.replace(/\b[^\s]+?\b/g, $0 => `<span>${$0}</span>`); 
     .symbols span:first-child{ color:red; font-size:20px; } .symbols span:nth-child(2){ color:green; font-size:22px; } .symbols span:nth-child(3){ color:orange; font-size:14px; } .symbols span:nth-child(4){ color:yellow; font-size:18px; } .symbols span:nth-child(5){ color:pink; font-size:30px; } 
     <div class="symbols"> lorem ipsum sit ammed dollar </div>

    js provided by the kind community ruStackoverflow