Jack Maessen Jack Maessen - 3 months ago 6
CSS Question

Can i style an integer value in html with css

i was wondering, is there a way to style integers only in a given class?

My html looks like this:

<div class="output">0 hours 12 minutes and 40 seconds remaining</div>


So i want to make only the integres bold

I am looking for another option then this:

<div class="output"><b>0</b> hours <b>12</b> minutes and <b>40</b> seconds remaining</div>

Answer

You can use regular expressions and a .replace for this.

$(".output").html(function() {
	return $(this).text().replace(/(\d+)/g,"<strong>$1</strong>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">0 hours 12 minutes and 40 seconds remaining</div>

Or with plain JavaScript.

// See this answer about getting text: http://stackoverflow.com/a/6743966/1150683
var el = document.getElementsByClassName('output')[0];
var text = el.innerText || el.textContent || '';

el.innerHTML = text.replace(/(\d+)/g,"<strong>$1</strong>");
<div class="output">0 hours 12 minutes and 40 seconds remaining</div>

Comments