防止自定义（损坏的）HTML破坏页面的其余部分

elexis 发表于 Dev

线虫

我使用的产品支持用户以markdown格式提供自定义描述（这是新产品，以前他们只能提供原始html）。不幸的是，许多用户已经使用该产品多年，因此，许多描述都由标记组成，这些标记包括“某种作品”或“ IE8中的作品”。

我并不特别在乎他们的描述是否由于损坏而无法正确显示，我担心的是不应因此而破坏页面的其余部分。

破解代码示例

<ul>
</li>
    <li>foo</li>
    <li>bar</li>
</li>
<!-- no closing ul -->

我为减轻影响所做的事情

我删除了以下标签：html头体样式frameset框架iframe脚本markdown-rendered
环绕描述<markdown-rendered>作为一种包含代码的方式。

即使采取了这些缓解措施，上面示例中的代码仍然会“爆发”。对于上面的示例，大量标记在ul内移动之后。我还能做什么来“包含”不良标记？

桑普森

将无效标记注入文档后，将对其进行解析和修复，以达到浏览器的最佳性能。我建议事先进行此操作，并注入此操作的结果，而不要允许此操作潜在地破坏您先前存在的结构。

过去，库和框架执行此操作的一种方法是创建一些临时结构，将无效标记分配为innerHTML，然后读回innerHTML：

var markup = clean( "<ul></li><li>foo</li><li>bar</li></li>" );

console.log( markup ); // "<ul><li>foo</li><li>bar</li></ul>"

function clean ( invalid ) {
    var container = document.createElement( "div" );
    return ( container.innerHTML = invalid ), container.innerHTML;
}

分配标记后，将对其进行解析，修复并构造为实际的DOM对象。当我们读回innerHTML时，我们将直接从浏览器中获得漂亮干净的代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。