寻找以A开头B结尾的字符串并替换
假设我要替换html文本中被标记的地方,或者需要循环生成子元素。比如我有一个html文件如下: {}
中的内容表示需要替换的文本,for...for
两个for中间的部分表示需要循环生成的子节点。
<div style="width: 100%;border: 1px solid #000;">
<div style="width: 100%; font-size: 30px; text-align: center;">
这是我的模板
</div>
<div style="width: 100%;display: flex; justify-content: flex-start; ">
<div style="width: 50%;">学校: {school}</div>
<div style="width: 50%;">班级: {className}</div>
</div>
<div style="width: 100%;">
for<div style="width: 50%;">姓名: {name}</div>for
</div>
</div>
一寻找以A开头B结尾的字符串的正则表达式
const regx =/A.*?B/; // A与B中间的字符串包含A与B
const regx =/A.*?(?=B)/; // A与B中间的字符串包含A但是不包含B
const regx =/(?<=A).*?B/;// A与B中间的字符串包含B但是不包含A
const regx =/(?<=A).*?(?=B)/;// A与B中间的字符串且不包含A与B
二方法实现
const fs = require('fs');
const school = '家里蹲大学';
const className = '火箭班';
const list = [{name: '小明'},{name: '小王'}];
const data = fs.readFileSync('./index.html','utf-8');
const regx = /(?<=for).*?(?=for)/
const findData = data.match(regx);
let regxStr = '';
let childrenNode = '';
if (findData){
regxStr = findData[0]; // 匹配到的字符串
}
if (regxStr){
list.forEach(e=>{
const str = regxStr.replace(/{name}/g,e.name); // 将子节点需要替换的地方替换掉
childrenNode += str;
})
}
const newData = data.replace(/for.*?for/g,childrenNode) // 替换子节点到原来需要循环生成dom元素的地方
.replace(/{school}/g,school)
.replace(/{className}/g,className)
console.log(newData);
fs.writeFileSync('./test.html',newData);
最后在同级目录下得到一个替换好的html文件
<div style="width: 100%;border: 1px solid #000;">
<div style="width: 100%; font-size: 30px; text-align: center;">
这是我的模板
</div>
<div style="width: 100%;display: flex; justify-content: flex-start; ">
<div style="width: 50%;">学校: 家里蹲大学</div>
<div style="width: 50%;">班级: 火箭班</div>
</div>
<div style="width: 100%;">
<div style="width: 50%;">姓名: 小明</div><div style="width: 50%;">姓名: 小王</div>
</div>
</div>