浅谈待预览HTML代码的包装

马黑黑 · 发表于 2026-6-7 09:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

×

在线预览 html 代码的效果有很多实现方式，其中，使用“Blob + URL”方法足够轻量、高效。核心代码如下：

// content 为 html 代码字符串
let content = '<h1>Hello World!</h1>';
const codeBlob = new Blob([content], { type: 'text/html' });
const tmpUrl = window.URL.createObjectURL(codeBlob);
window.open(tmpUrl, '_blank');

Blob（Binary Large Object）对象将文本内容存储为二进制数据对象，window.URL 接口借助 createObjectURL() 静态方法将实例化的 Blob 对象创建为 URL 字符串，“无中生有”地创建了一个可访问的、包含了网页内容的地址，window.open() 方法将其打开，'_blank' 规范了新窗口（标签）的打开方式。

上述代码示例中的第一行注释提到 html 代码的内容。这些内容不论从何而来，我们可能都应考虑：是否对内容进行包装。一个新的页面，哪怕是无中生有的，它都应该是完备的Web页，换言之，html 代码应该具备完整的DOM结构，至少拥有 <html>、<head> 和 < body > 等三个核心标签，以防止效果预览异常。当接收到的代码不包含有这三个标签，我们需要创建它们，反之，我们就不需要对其进行额外的封装。那么，如何判断提交的代码字串里是否包含有核心三标签？请看如下函数，它可以检测传参字符串参数是否包含Web页结构性核心标签：

// 判断html代码是否为完整结构
isCompleteHtmlPage(code) {
    const hasHtmlTag = /<html\b[^>]*>/i.test(code);
    const hasHeadOrBody = /<head\b[^>]*>|<\/head>|<body\b[^>]*>|<\/body>/i.test(code);
    return hasHtmlTag && hasHeadOrBody;
}

这里，我们使用正则表达式先判断代码字串是否包含 <html ...> 标签，接着判断是否包含 <head> 和 <body ...> 标签，这三个标签同时存在就返回真。这是粗略判断，简单够用，多数情形下完全可以检测用户提交的 html 代码结构中是否包含了核心三标签。

然后在预览之前，根据判断结果对接收到的内容或包装或不包装：

// 预览函数
preView = (code) => {
    let content; // 待预览的完整内容
    // 如果提交的代码包含核心三标签
    if (isCompleteHtmlPage(code)) {
        content = code; // 就无需包装
    // 否则给原始代码加入必要的标签
    } else {
        content = `<html lang="zh">\n<head>\n<meta charset="utf-8">\n<title>预览</title>\n</head>\n<body>\n${code}\n</body>\n</html>`;
    }
    // 预览
    const codeBlob = new Blob([content], { type: 'text/html' });
    const tmpUrl = window.URL.createObjectURL(codeBlob);
    window.open(tmpUrl, '_blank');
}

此为方案一：正则判断+手动包装。正则表达式处理复杂的结构可能不够牢靠，如果需要相对健壮的解决方案，可以考虑方案二：使用现代浏览器自带的 DOMParser() 接口对字符串进行处理，该接口非常主动，对 html 代码会进行核心三标签补全操作。试看如下函数及其应用示例：

function parseStr2Doc(code) {
    const parser = new DOMParser();
    let doc = parser.parseFromString(code, 'text/html');
    return doc.documentElement.outerHTML;
}
    
let str = '<h1>Hello World</h1>';
console.log(parseStr2Doc(str));
// -> <html><head></head><body><h1>Hello World</h1></body></html>

如上注释提供的控制台打印结果所示，DOMParser() API是智能的，传参代码中如果没有三核心标签它会补上。另外，我们可以进一步做包装，比如给 doc 实例化对象追加 meta 和 title 标签，以保证待预览的页面更完整，这将很容易，因为 doc 实例化对象就是一个真实的 DOM（文档模型）结构，完全可以像操作现实 Web 页对象那样给其 head 或 body 等进行 appendChild 操作——包括判断 head 中是否存在 title 标签和给它追加 title 标签。最后要做的，就是将返回或获取到的完整内容提交给预览模块即可大功告成。

结语：第一种代码包装方法，正则判断后的包装简单够用，优点是可控性更强，缺点是正则的能力可能不适宜解决复杂结构的代码；第二种方法，即使用 DOMParser 处理 DOM 结构应该更强大，优点是智能判断、补全核心标签代码甚至有纠错能力，缺点是可控门槛较高。两种方法使用何者，可根据应用场景和个人能力进行选择。