JS将docx转为html代码--Vue3（简易版）

这两天突然接了一个把节气文章转成html页面的需求，本来只是需要多按几下ctrl+c,ctrl+v能解决的事，但是想想后续一年24个节气，就做个自动转换的工具吧。由于做软件还涉及到其他语言和配置环境，所以还是选择了web。
首先创建一个vue3项目，我用的vite搭建的，不会的请自行移步到vite官网。
至于docx转html，自行操作的话复杂度高，所以选择了mammoth依赖库。
HTML代码：
<input type="file" @change="onFileChange" accept=".doc,.docx" />
JS代码：

**点击查看代码**

function onFileChange(event) { // 选择文件
    const file = event.target.files[0];
    if (file) {
      readWordFile(file);
    }
}
const content = ref(''); // html内容，可在代码中使用v-html展示
function readWordFile(file) { // 读取文件
    const reader = new FileReader(); // 创建FileReader
    reader.onload = async (e) => { // 加载文件
      const arrayBuffer : ArrayBuffer = e.target?.result as ArrayBuffer;
      try {
        const result = await mammoth.convertToHtml({ arrayBuffer }); // 将文件转为html
        console.log("Word file result:", result);
        content.value = result.value // 将结果赋值给content
        // navigator.clipboard.writeText(content.value);
      } catch (error) {
        console.error("Error reading Word file:", error);
      }
    };
    reader.readAsArrayBuffer(file); // 将file用ArrayBuffer格式读取
  }

本来到这就差不多结束了，但是，样式呢？通过显示的结果内容可以看出，mammoth会将段落写在p标签，将标题用h1，h2来包裹，加粗会用strong标签，但是是没有css样式的，这样我们的UI没法通过呀~。在查看内容时也发现图片是用base64渲染的，因为我需要复制此代码放在另外的html页面并渲染在移动端，当有多个图片或图片过大时，会导致编辑器卡顿等问题。于是需要对结果做一些处理，mammoth官方文档也有提供方法和思路，比如mammoth.images.imgElement()，transformElement等，详情可以看mammoth的[npm文档](https://www.npmjs.com/package/mammoth)。但是我还是想自己做处理，于是，魔鬼般的写正则开始了………… 首先，图片和图片介绍小字要改，不过我拿的文章图片和介绍格式比较统一，所以稍微好操作一些，不过图片名称和介绍肯定不一样，对于经常使用replace和replaceAll进行初级转换的我来说确实小小的难住了一下哈哈，在翻看了MDN后，决定采用replace的正则加function返回替换值的方式，至于怎么判定是哪个图片，就定义一个i来累加好了。思路有了，开始敲代码~

点击查看代码

function replaceImagesToTxt (html) { // 替换图片路径和图片介绍
    const regex = /<p\s*>\s*<img\s+[^>]+?\s*>\s*<\/p>\s*<p\s*>(.*?)\s*<\/p>/gi;
    const today = getToday();
    let i = 0;
    return html.replace(regex, function (match, capture) {
      console.log(match);
      i++;
      return `<img style="width: 100%; height: auto;" src="/html/articleImg/${today}/${i}.jpg" alt="图片${i}"><div style="width:100%;text-align:center;font-size:0.8rem;">${capture}</div>`;
    })
}
function  getToday () { // 获取今天日期yyyy/MM/dd
    return new Date().toISOString().split('T')[0].replace(/-/g, '-');
}

替换部分是很好写的，问题在于正则，为了避免匹配超过的情况，所以需要非贪婪模式，大概调试了十来遍之后才写对。 详细解释一下正则表达式的组成部分

咦~，不知道为什么p标签的正则在这里会显示错误，直接图片展示啦。
后面如出一辙，就懒得写了，各位自行观看吧。
至于替换其他段落的样式，和以上正则方法类似，就不赘述了，还是要好好学正则呀~。
如果有建议或者意见可以提出来呀，本人第一篇博客，还请多多包涵。