css - 我可以用 css 在 html 中设置整数值的样式吗

Question

我想知道，有没有办法只在给定的类中设置整数样式？

我的 html 看起来像这样:

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

所以我只想把整数加粗

我正在寻找另一个选择:

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

Answer 1

您可以为此使用正则表达式和 .replace。

$(".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>

或者使用纯 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>