Question

我所使用的产品支持用户以降价格式提供自定义描述（这是新的，之前他们只能提供原始的html）。不幸的是，许多用户多年来一直在使用这个产品，因此有许多描述包含“有点工作”或“在IE8中工作”的标记。

我不特别在意他们的描述是否正确，因为它们已被破坏，我担心的是页面的其余部分不应因此而被破坏。

破解代码示例

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

我为减轻影响而采取的措施

我删除了以下标签：html head body style frameset frame iframe script markdown-rendered
使用<markdown-rendered>作为包含代码的方式的环绕声描述。

即使有了这些缓解措施，上面例子中的代码仍然会“爆发”。对于上面的例子，在ul内部移位后会有大量的标记。我还能做些什么来“包含”坏标记？

Answer 1

当您将无效标记注入文档时，它将被解析并修复到浏览器的最佳能力。我建议事先这样做，并注入此操作的结果，而不是允许此操作可能破坏您原有的结构。

过去，库和框架完成此任务的一种方法是创建一些临时结构，将无效标记分配为 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 时，我们将直接从浏览器中获得漂亮而干净的代码。

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

1 个答案: