这两天突然接了一个把节气文章转成html页面的需求，本来只是需要多按几下ctrl+c,ctrl+v能解决的事，但是想想后续一年24个节气，就做个自动转换的工具吧。由于做软件还涉及到其他语言和配置环境，所以还是选择了web。
首先创建一个vue3项目，我用的vite搭建的，不会的请自行移步到vite官网。
至于docx转html，自行操作的话复杂度高，所以选择了mammoth依赖库。
HTML代码：
点击查看代码
<input type="file" @change="onFileChange" accept=".doc,.docx" />
点击查看代码
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格式读取
}
点击查看代码
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, '-');
}
标签后可能有任意数量的空白字符。 2.\s* (在
和<img之间): 这部分匹配<p="">标签关闭的大于号>和<img标签开始的小于号<之间的任意数量的空白字符。这意味着在这两者之间可以有任意数量的空格或没有空格。 3.<img\s+:="" <img="" 匹配字符串<img。="" \s+="" 匹配至少一个空白字符。这确保了<img="">标签后面必须跟着至少一个空白字符，通常用来分隔标签名和属性。
4.([^>]+?):
( 和 ) 定义了一个捕获组，意味着这部分内容会被捕获并可以在替换中使用。
[^>]+? 是一个非贪婪匹配，它会匹配除了大于号>以外的所有字符，直到遇到第一个>为止。这里的+?表示匹配一个或多个字符，但尽可能少地匹配（即非贪婪模式），以确保不会跨过实际的>标签结束符去匹配更多内容。
5.\s*>:
\s* 再次匹配任意数量的空白字符。
> 匹配>符号，它是标签的结束。
6.\s*<\/p>:
\s* 匹配
标签结束后的任意空白字符。
<\/p> 匹配字符串