Highlight a price in text

JavaScript
1

Hi,

I have the following sentances:

The price is £6.45.
The price if £4.54

I would like to make the prices a red colour. How would I do this using jQuery?

Thanks!

2

Do you want the pound sign to be highlighted, too?

3

Yes, so the whole price is highlighted.

Thanks

4

Maybe like this:

var html = document.body.innerHTML;
html = html.replace(/(£\\d*?\\.\\d*)/g, "<span class='highlighted'>$1</span>" );
document.body.innerHTML = html;

Where the html variable should reference whatever particular container you are targeting.

Demo

5

Many thanks.

I have tried this, but it doesn’t work:


<div class="saving">
    <p>The price is £6.45</p>
<p>The price is £4.54</p>
</div>



var html = saving;
html = html.replace(/(£\\d*?\\.\\d*)/g, "<span class='highlighted'>$1</span>" );
document.body.innerHTML = html;
6

You can do it like this:

var div = document.querySelector(".saving");
div.innerHTML = div.innerHTML.replace(/(£\\d*?\\.\\d*)/g, "<span class='highlighted'>$1</span>" );

Demo

7

[edit]I see you asked for jQuery in your original question. Although not necessary in this case, that would be this:

var content = $(".saving").html();
$(".saving").html(content.replace(/(£\\d*?\\.\\d*)/g, "<span class='highlighted'>$1</span>"));

[/edit]

8

Many thanks, it worked!