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

Question

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

Answer 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

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