3

How to apply CSS only to numbers in paragraphs without wrapping numbers in spans?

<p>Text and numbers: 123</p>
<p>123 and text</p>

Are there any selectors? In jQuery, maybe. Or somehow parse it using javascript...

Expected result:


enter image description here

Vlad Holubiev
  • 4,876
  • 7
  • 44
  • 59

3 Answers3

10

You can't do this with only CSS. Since you also marked your question with a jQuery tag, you can however do it this way:

$('p').html(function(index, value) {
    return value.replace(/(\d+)/g, '<span>$1</span>');
});

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
1

There is no way to do what you want without wrapping the desired text strings in elements, like spans or anything else.

With jQuery:

(function($) {
    $(function() {
        $('p').each(function() {
            var el = $(this),
                html = el.html();

            html = html.replace(/(\d)/gi, "<span class='numbers'>$1</span>");

            el.html(html);

        });
    });
})(jQuery);
Alex
  • 9,911
  • 5
  • 33
  • 52
0

try something like:

$('p').html(function(index, value) {
    return value.replace(/(\d+)/g, '<span class="here_you_class">$1</span>');
});
Aguardientico
  • 7,641
  • 1
  • 33
  • 33