![](/img/trans.png)
[英]Javascript - easy way to split/devide string by pattern into N parts where last part is rest of the string
[英]Is there an easy way to style the last couple characters of a string?
我有一些浮点数,我想表明最后几位不重要。 我的想法是这样的。
数量为273.978
<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>
如果有像“nth-last-chars”CSS选择器这样的东西会很棒。 然后我可以在我的CSS文件中设置这一切,而不是在JavaScript中砍掉数字。 有没有更好的方法来实现这一目标?
编辑:这是本机JavaScript解决方案的样子:
<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>
<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>
与stef有同样的想法:
<style type="text/css">
.number {
font-family: monospace;
}
.number:after {
background-color: rgba(255,255,255,0.5);
content: "";
display: inline-block;
height: 1em;
width: 1.2em;
position: relative;
top: 0.25em;
right: 1.2em;
}
</style>
<span class="number">273.978</span>
在jQuery中脱颖而出:
<script type="text/javascript">
$('.numbers').each(function() {
$(this).html(
$(this).html().substr(0, $(this).html().length-2)
+ "<span style='color: #3399ff'>"
+ $(this).html().substr(-2)
+ "</span>");
});
</script>
这是演示它的小提琴 。 对不起,这不是简单的JavaScript,但我相信这里的一个人可以提供原生解决方案,如果这不会削减你的玉米。
更新:这是一个非jQuery解决方案,另一个演示它的小提琴 。 我也把风格打破了CSS。
<style type="text/css">
.unimportant {
color: #3399ff;
}
</style>
<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
var html = numberTargets[i].innerHTML;
numberTargets[i].innerHTML = html.substr(0, html.length-2)
+ "<span class='unimportant'>"
+ numberTargets[i].innerHTML.substr(-2)
+ "</span>";
}
</script>
除了服务器端方法(最简单),您可以添加width: 1.75em; background-color: rgba(255,255,255,0.5)
的覆盖范围width: 1.75em; background-color: rgba(255,255,255,0.5)
width: 1.75em; background-color: rgba(255,255,255,0.5)
并将其固定在容器对象的右侧,并且az索引大于主浮点显示对象。
如果您有实验感,可以尝试使用HTML5 <input type="number" step="0.1" />
元素 ,这取决于浏览器会根据其值舍入到最接近的值。
您可以使用PHP为前3/4字符的span标记添加一个类(我假设您使用php生成这些浮点数)和之后的任何类的不同类,
然后只需将类添加到CSS文件中即可突出显示。
AFAIK没有CSS选择器来做你需要的东西,'nth'选择器更多用于标签,类和id而不是单个字符。
编辑:在javascript中这可以通过使用foo.charAt(N)来完成;
所以将你的字符串加载到var中:
var foo=[number generation code];
var foo0=foo.charAt(0);
var foo1=foo.charAt(1);
var foo2=foo.charAt(2);
var foo3=foo.charAt(3);
然后,您可以将字符打印到代码中的适当位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.