怎么把dom元素的文本中的数字先取出来然后再改变数字颜色

Question

问题描述

一段文本例如“我的123联发科456浮夸789”，把123456789取出来组成数组或者其他的数据类型，然后把123456789改变颜色，再放回去，这个功能能否实现？

Answer 1

HTML

<p id="demo">
  我的123联发科456浮夸789
<p>

STYLE

<style type="text/css">
    #demo span {
        color: red;
    }
</style>

JS

let text = document.getElementById("demo").innerText;
let html = text.replace(/(\d+)/g, `<span>$1</span>`);
document.getElementById("demo").innerHTML = html;

Answer 2

https://codepen.io/littlelyon...

Answer 3

正则的字符串替代~ 数字加个标签 <span style="color:red;">123</span>

Answer 4

正则不精通，不过也实现了：

        <style>
        .onlyone{
            color: red;
        }
    </style>
    <div id="div">
        我的123联发科456浮夸789
    </div>
    
    <script>
        var ins = document.getElementById('div');
        var arr = ins.innerText.match(/\d{1,}/g);
        ins.innerHTML = ins.innerText.replace(/\d{1,}/g,'<span class="onlyone"></span>')
        var el = document.querySelectorAll('.onlyone');
        el.forEach(function(item,i){
            item.innerText = arr[i]
        })
    </script>