<!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>
极简的vue{{}}替换
最新推荐文章于 2024-04-23 21:34:27 发布