Предотвратить пользовательский (сломанный) html от остальной части страницы

Question

Продукт, над которым я работаю, поддерживает пользователей, предоставляющих настраиваемые описания в формате уценки (это новый, ранее они могли предоставить только исходный html). К сожалению, многие пользователи используют этот продукт в течение многих лет, и в результате существует много описаний, которые состоят из разметки, что «вид работ» или «работает в IE8».

Меня не особо волнует, если их описания не оправдываются, потому что они сломаны, что меня беспокоит, так как остальная часть страницы не должна быть разбита из-за нее.

Пример сломанный код

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

Вещи, которые я сделал, чтобы смягчить эффект

• Я удалить следующие теги: HTML голова стиль тело фреймами кадр IFrame сценарий уценки рендеренной
• Объёмное описание <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, мы получим красивый и чистый код непосредственно из браузера.