場景：后端給你一個字段里面的一句話，ui要你顯示兩種樣式，后端不會用dom返回給你，這種情況怎么出處理，比如下面的文案包括手機號碼，這些內(nèi)容只在一個字段里面給你，而且返回的字段沒有dom及樣式，這個時候就需要自己拼接dom了

image.png

處理：跟后端約定好返回值，比如上面的電話需要特殊處理，那么讓后端給你返回值的時候在手機號前后拼接上特殊字符#，然后根據(jù)截取拼接出dom

<script>
    //后端返回給你的字符串
    let str = '租房請撥打以下電話#********1254#如果打不通請打#********9871#'
    function strHandle(str) {
        let arr = [];
        str.split('#').map((item,index)=>{
            if((index+1) % 2 === 0 && index > 0){
                item = "<div class='mobile'>"+item+"</div>"
            }
            arr.push(item);
        })
        return arr.join("");
    }
    let dom = strHandle(str)
    console.log(dom,'dom') // 處理后得到的字符串：租房請撥打以下電話<div class='mobile'>********1254</div>如果打不通請打<div class='mobile'>********9871</div>
    document.getElementById("wrap").innerHTML = dom
</script>

如果一個字符串需要3種樣式，你可以用另一個特殊字符去分割，再按照上面的方法去遍歷，也可以用{}去替代

image.png

<script>
    let str = '{尊敬的客戶:}租房請撥打以下電話#********1254#如果打不通請打#********9871#'
    function strHandle(str) {
        str = str.replaceAll('{','<div class="title">').replaceAll('}','</div>')
        console.log(str,'str') //<div class="title">尊敬的客戶:</div>租房請撥打以下電話#********1254#如果打不通請打#********9871#
        let arr = [];
        str.split('#').map((item,index)=>{
            if((index+1) % 2 === 0 && index > 0){
                item = "<div class='mobile'>"+item+"</div>"
            }
            arr.push(item);
        })
        return arr.join("");
    }
    let dom = strHandle(str)
    console.log(dom,'dom') // <div class="title">尊敬的客戶:</div>租房請撥打以下電話<div class='mobile'>********1254</div>如果打不通請打<div class='mobile'>********9871</div>
    document.getElementById("wrap").innerHTML = dom
</script>