html替换匹配文本
2019-07-04 本文已影响0人
小银
直接上代码:
逻辑很简单就是用递归哪到text节点替换对应字符。
(本来想用正则处理 但是难度还是太大了有时间再仔细思考下正则的方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
replaceNode('a')
function replaceNode(key) {
let htmlstr = '2<div > a1 <a href="####"> a2</a> a3</div> 11111<p>testa</p>1'
let div = document.createElement("div");
div.innerHTML = htmlstr;
const reg = new RegExp(key, 'g');
let replaceStr = `<span class="aqua">${key}</span>`
replace(div, reg, replaceStr)
div.innerHTML = div.innerHTML.replace(/>/g, '>').replace(/</g, '<')
document.body.appendChild(div)
}
function replace(node, reg, replaceStr) {
for (let i = 0; i < node.childNodes.length; i++) {
let cnode = node.childNodes[i];
if (cnode.nodeName === '#text') {
cnode.data = cnode.data.replace(reg, replaceStr)
} else {
replace(cnode, reg, replaceStr)
}
}
}
</script>
<style>
.aqua {
color: aqua;
}
</style>
</body>
</html>
