基于 DOMParse API 的 HTML 预览演示
<div class="hEdiv" data-prev="1"><pre class="hEpre"><button type="button" id="btnTest">点击我预览效果</button>
<script>
function preView(code) {
// HTML代码转DOM实体
const doc = new DOMParser().parseFromString(code, 'text/html');
// 添加meta标签(用于定义网页字符集)
const metas = doc.getElementsByTagName('meta');
let hasCharset = false; // 字符集meta未定义
// 遍历meta标签
for (let j = 0; j < metas.length; j ++) {
if (metas.hasAttribute('charset')) {
hasCharset = true; // 字符集已定义
break;
}
}
// 若未定义字符集则创建meta标签
if (!hasCharset) {
const meta = document.createElement('meta');
meta.setAttribute('charset', 'utf-8');
doc.head.prepend(meta);
}
// 若不存在title标签创建之
if (!doc.title) {
const title = document.createElement('title');
title.textContent = '预览';
doc.head.appendChild(title)
}
// 获取完整HTML代码文本
const content = doc.documentElement.outerHTML;
// 预览
const codeBlob = new Blob(, { type: 'text/html' });
const tmpUrl = window.URL.createObjectURL(codeBlob);
window.open(tmpUrl, '_blank');
}
// 故意令代码结构不完整
let htmlCode = `<body>\n<style>\nh1 { color: red; };\n</style>\n<h1>Hello World!</h1>\n</body>`;
btnTest.onclick = () => preView(htmlCode);
</script>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 本帖可以视为 浅谈待预览HTML代码的包装 的补充：提供一个使用 DOMParse API 的待预览 HTML 代码的函数和函数应用示例。
核心在函数 preView(code)，参数 code 是纯文本 html 代码字串。
这个包装待预览html代码的方案，包装的工作不仅针对 Web 结构的完整性，还特别处理 meta 标签字符集声明和 title 标签，前者针对页面显示避免乱码、后者针对页面（标签页）的标题显示。
在最终的预览页面，可以右击查看原始代码，会发现核心三元素是齐备的，还有我们添加的 meta 和 title 标签（不论 htmlCode 变量里的文本是否包含这些） 马老师晚上好！我就看到了你好世界{:4_173:}{:4_204:}{:4_190:}
https://s3.bmp.ovh/2026/06/07/ycZL6Nia.jpg
霜染枫丹 发表于 2026-6-7 21:45
马老师晚上好！我就看到了你好世界
嗯嗯，挺好的 黑黑辛苦了，前面的知识讲完就有实际的预览案例，看看这个，更容易理解了{:4_187:} 红影 发表于 2026-6-7 22:07
黑黑辛苦了，前面的知识讲完就有实际的预览案例，看看这个，更容易理解了
{:4_190:} 马黑黑 发表于 2026-6-7 23:08
谢大咖{:4_187:} 红影 发表于 2026-6-8 14:45
谢大咖
阔气阔气
页:
[1]