极简的vue{{}}替换

最新推荐文章于 2024-04-23 21:34:27 发布

潇潇暮雨子规啼~

最新推荐文章于 2024-04-23 21:34:27 发布

阅读量778

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

潇潇暮雨子规啼~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
极简的vue{{}}替换

<!DOCTYPE html><html><head> <title>01</title></head><body> <div id="app"> <p>{{ name }} <span>{{name}}</span></p> </div></body><script>
复制链接

扫一扫