jQuery JS 如何改变页面上的数字

Posted 2021-08-13 mqy1023

只需要在控制台上执行下面代码，就可改变页面上相应内容的值

一、高亮页面上的所有数字

(function hilightNumber(jqObj) {
    // 不能替换script标签里的数字
    var domObj = jqObj[0];
    if (domObj.nodeName == "SCRIPT") {
        return;
    }
    // 如果标签里有标签，我们也不作替换，而是递归进去遍历内层的标签。
    var children = jqObj.children();
    if (children.length > 0) {
        for(var i=0; i<children.length; i++) {
            hilightNumber($(children[i]));
        }
    } else {
    // 标签里只有文字，没有内层标签的时候，才做替换，
    // 把123替换成带颜色的标签内包含123，就实现了高亮。
        var hilightedhtml = jqObj.html().replace(/([+\\-]?[0-9]+(\\.[0-9]+)?)/g, "<span style='background:yellow;'>$1</span>");
        jqObj.html(hilightedHtml);
    }
})($("body"));

二、改变金额数字

23,233,23元 => 23,233,23 * 0.9 元

(function hilightNumber(jqObj) {

    var discount = 0.9

    // 不能替换script标签里的数字
    var domObj = jqObj[0];
    if (domObj.nodeName == "SCRIPT") {
        return;
    }
    // 如果标签里有标签，我们也不作替换，而是递归进去遍历内层的标签。
    var children = jqObj.children();
    if (children.length > 0) {
        for(var i=0; i<children.length; i++) {
            hilightNumber($(children[i]));
        }
    } else {
    // 标签里只有文字，没有内层标签的时候，才做替换，
    // 把123替换成带颜色的标签内包含123，就实现了高亮。
        var hilightedHtml = jqObj.html().replace(/^(([1-9][0-9]{0,2}(,\\d{3})*)|0)(\\.\\d{1,2})元$/g, function(word){
          
          word = word.replace(',', "")
          word = word.replace('元', "")
          word = word.replace('.', "")
          word = parseInt(word * discount) + ""

          pointStr = word.substring(word.length-2)
          headNum = word.substring(0, word.length-2)
          headNum1 = headNum.replace(/(?=(?!(\\b))(\\d{3})+$)/g, ",")
          
          return headNum1 + "." + pointStr + "元"
          }
        );
        jqObj.html(hilightedHtml);
    }
})($("body"));