这两天突然接了一个把节气文章转成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(); // 创建FileReaderreader.onload = async (e) => { // 加载文件const arrayBuffer : ArrayBuffer = e.target?.result as ArrayBuffer;try {const result = await mammoth.convertToHtml({ arrayBuffer }); // 将文件转为htmlconsole.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/ddreturn new Date().toISOString().split('T')[0].replace(/-/g, '-');
}
:
标签后可能有任意数量的空白字符。 2.\s* (在
和标签关闭的大于号>和标签后面必须跟着至少一个空白字符,通常用来分隔标签名和属性。 4.([^>]+?):( 和 ) 定义了一个捕获组,意味着这部分内容会被捕获并可以在替换中使用。[^>]+? 是一个非贪婪匹配,它会匹配除了大于号>以外的所有字符,直到遇到第一个>为止。这里的+?表示匹配一个或多个字符,但尽可能少地匹配(即非贪婪模式),以确保不会跨过实际的>标签结束符去匹配更多内容。 5.\s*>:\s* 再次匹配任意数量的空白字符。> 匹配>符号,它是标签的结束。 6.\s*<\/p>:\s* 匹配标签结束后的任意空白字符。<\/p> 匹配字符串
,注意斜杠被反斜杠转义了,因为斜杠是正则表达式中的特殊字符。 后面如出一辙,就懒得写了,各位自行观看吧。 至于替换其他段落的样式,和以上正则方法类似,就不赘述了,还是要好好学正则呀~。 如果有建议或者意见可以提出来呀,本人第一篇博客,还请多多包涵。