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

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

阅读 537
评论
    1 个回答
    • 2.8k

    问题你没说清楚,如果是用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

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

      相似问题
      推荐文章