极简的vue{{}}替换

最新推荐文章于 2025-03-06 13:44:50 发布

潇潇暮雨子规啼~

最新推荐文章于 2025-03-06 13:44:50 发布

阅读量856

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_31706077/article/details/122051290

版权

<!DOCTYPE html>
<html>

<head>
    <title>01</title>
</head>

<body>
    <div id="app">
        <p>{{ name }} <span>{{name}}</span></p>
    </div>
</body>
<script>
    let moban = /\{\{(.+?)\}\}/g
    function mapping(node, data) {
        node.childNodes.forEach(item => {
            if (item.nodeType == 3) {//3是文本节点
                let value = item.nodeValue
                value = value.replace(moban, (_, key) => {
                    let name = key.trim()
                    return data[name]
                })
                item.nodeValue = value
            } else if (item.nodeType == 1) { //1是元素节点
                mapping(item, data)
            }
        })

    }
    let data = {
        name: '是三三呀'
    }
    let node = document.querySelector('#app')
    let parent = node.parentNode
    copyNode = node.cloneNode(app, true)
    mapping(copyNode, data)
    parent.removeChild(app)
    parent.appendChild(copyNode)
</script>

</html>