寻找以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>