JS控制前端数字显示为红色

一个人の旅行
  • 130

数据已经渲染到前端,产品需要页面所有的数字,金额,百分比都显示为红色。如何用JS控制啊。
image.png类似这种情况,当然中文不需要加红,只需要数字加红就行。貌似可以使用正则,但是不太会用,没有成功,求指导。

回复
阅读 994
1 个回答
✓ 已被采纳

问题你没说清楚,如果是用vue.js渲染到前端的。比如:

<div id="app">
    <p v-text="msg"></p>
</div>
    new Vue({
        el:"#app",
        data(){
            return {
                msg:"52.53%"
            }
        }
    })

比如类似如上渲染的:

你可以这样修改:

    <div id="app">
        <p v-html="msg"></p>
    </div>
    new Vue({
        el:"#app",
        data(){
            return {
            //如果你不想%号也渲染成红色,把符号提到外面去即可
                msg:"<span style='color:#f00;'>52.53%</span>"
            }
        }
    })

那如果是通过jq或者js渲染的呢?比如:

<div id="app">
    <p></p>
</div>
    //jq
    $('#app p').text("52.53%");
    //js
    document.querySelector('#app p').textContent="52.53%";
    //两种修改方式
    //jq
    $('#app p').text("<span style="color:#f00;">52.53%</span>");
    //js
    document.querySelector('#app p').textContent="<span style="color:#f00;">52.53%</span>";
    //如果你不想%号也渲染成红色,把符号提到外面去即可

如果你这一堆都是一堆字符串,需要通过正则匹配去替代最后渲染:

    var str = "企业名称:四川....52.53%";
    str = str.replace(/\d+/g,(word) => { return '<span style="color:#f00;">' + word + '</span>'});
    //如果包含小数点和百分比,正则可修改如/\d+\.*\d+/g或/\d+\.*\d+%/g

这样都是可以的,你是想要哪一种实现方式?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏