javascript 如何仅将 css 应用于文本中/或任何 <p><p> 元素中的数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19679719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply css to only numbers in a text inside/or any <p><p> element?
提问by Sinju Angajan
I am Using a Regional language unicode font-face in my site but the numbers are not looking good.
我在我的网站中使用区域语言 unicode 字体，但数字看起来不太好。
So I want to apply new font-style or css to numbers only..
所以我只想将新的字体样式或 css 应用于数字。
please help
请帮忙
回答by James Donnelly
This can be done using CSS's unicode-rangepropertywhich exists within @font-face.
这可以使用 .css中存在的CSSunicode-range属性来完成@font-face。
The numbers 0 to 9 exist in Unicode within the range U+0030to U+0039. So what you'll need to do is include a font alongside your existing font which specifically targets this range:
数字0到9中存在的Unicode的范围内U+0030来U+0039。因此，您需要做的是在现有字体旁边包含一个专门针对此范围的字体：
@font-face {
font-family: 'My Pre-Existing Font';
...
}
@font-face {
font-family: 'My New Font Which Handles Numbers Correctly';
...
unicode-range: U+30-39;
}
The result of this will be that every instance of Unicode characters U+0030(0) through to U+0039(9) will be displayed in the font which specifically targets that range, and every other character will be in your current font.
这样做的结果是，Unicode 字符U+0030(0) 到U+0039(9) 的每个实例都将以专门针对该范围的字体显示，而其他所有字符都将使用您当前的字体。
回答by LondonAppDev
There is no way to apply CSS to all numbers specifically. In each number tag you could add the attribute class='number'and then in the CSS you could add
没有办法专门将 CSS 应用于所有数字。在每个数字标签中，您可以添加属性class='number'，然后在 CSS 中添加
.number {
font-family: arial;
}
回答by Johan
You can wrap all numbers in p tags with a <span class="number">:
您可以使用 a 将所有数字包装在 p 标签中<span class="number">：
CSS
CSS
.number {
font-family: Verdana;
}
jQuery
jQuery
$('p').html(function(i, v){
return v.replace(/(\d)/g, '<span class="number"></span>');
});
But personally, I would go with James suggestion ;)
但就我个人而言，我会同意詹姆斯的建议；)
回答by Pablo Poveda
Better with this
用这个更好
$('p').html(function(i, v){
return v.replace(/(\d+)/g, '<span class="number"></span>');
});
With + you avoid one span per complete number (span for 321), not one per each number found (span for 3 for 2 and for 1)
使用 + 可以避免每个完整数字一个跨度（跨度为 321），而不是每个找到的数字一个（跨度为 3 代表 2 和 1）
回答by Basil
You can use the regex replace and detect the numbers then add the class
您可以使用正则表达式替换并检测数字然后添加类
following code:
以下代码：
$('p').html(function(i,c) {
return c.replace(/\d+/g, function(v){
return "<span class='numbers'>" + v + "</span>";
});
});.numbers
{
color:red;
font-size:30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
View 11 new out of 11 message(s) in your inbox
</p>