字符串拼接

场景：后端给你一个字段里面的一句话，ui要你显示两种样式，后端不会用dom返回给你，这种情况怎么出处理，比如下面的文案包括手机号码，这些内容只在一个字段里面给你，而且返回的字段没有dom及样式，这个时候就需要自己拼接dom了

image.png

处理：跟后端约定好返回值，比如上面的电话需要特殊处理，那么让后端给你返回值的时候在手机号前后拼接上特殊字符#，然后根据截取拼接出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>