如何驗證或包裝用戶輸入的HTML以修復未關閉的標簽

Question

我有一個文本框，用戶可以輸入格式化文本或原始HTML。 一切正常，但用戶不會關閉標簽（如粗體標簽），然后它會破壞所有HTML格式（它全部變為粗體）。

有沒有辦法驗證用戶的輸入，自動關閉標簽，或以某種方式將用戶輸入包裝在元素中以阻止它泄漏？

Answer 1

你可以嘗試jquery-clean

$.htmlClean($myContent);

Answer 2

有沒有辦法驗證用戶的輸入，自動關閉標簽，或以某種方式將用戶輸入包裝在元素中以阻止它泄漏？

是：當用戶完成編輯文本區域后，您可以使用瀏覽器解析他們編寫的內容，然后從瀏覽器獲取解析結果的HTML版本：

var div = $("<div>");
div.html($("#the-textarea").val());
var html = div.html();

實例 - 鍵入未關閉的標簽，然后單擊按鈕：

 $("input[type=button]").on("click", function() { var div = $("<div>"); div.html($("#the-textarea").val()); var html = div.html(); $(document.body).append("<p>You wrote:</p><hr>" + html + "<hr>End of what you wrote."); }); 

 <p>Type something unclosed here:</p> <textarea id="the-textarea" rows="5" cols="40"></textarea> <br><input type="button" value="Click when ready"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

重要說明 ：如果您要存儲他們編寫的內容然后將其顯示給其他任何人 ，則沒有客戶端解決方案，包括上述解決方案，這是安全的。 相反，您必須使用服務器端解決方案來“清理”從中獲取的HTML，刪除（例如）惡意內容等。以上所有操作都可以幫助您獲得大部分格式正確的標記，而不是安全標記。

即使你只是向他們展示它，最好對它進行消毒，因為它們可以解決你所做的任何客戶端預處理問題。

Answer 3

您可以嘗試使用： http ： //ejohn.org/blog/pure-javascript-html-parser/ 。

但是如果用戶手動輸入html，您可以檢查是否正確關閉了所有標簽。 如果沒有，只需向用戶顯示錯誤消息。

Answer 4

您可以使用文本創建一個jQuery元素，然后獲取它的html，就像這樣

樣品

<textarea>
    <div>
        <div>
            <span>some content</span>
            <span>some content
    </div>
</textarea>

腳本

alert($($('textarea').text()).html());

---

 alert($($('textarea').text()).html()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea> <div> <div> <span>some content</span> <span>some content </div> </textarea> 

Answer 5

檢查輸入的HTML是否實際有效且瀏覽器可解析的簡單方法是讓瀏覽器使用DOMParser自行嘗試。 然后你可以檢查結果是否正常：

 function checkHTML(html) { var dom = new DOMParser().parseFromString(html, "text/xml"); return dom.documentElement.childNodes[0].nodeName !== 'parsererror'; } $('button').click(function() { var html = $('textarea').val(); var isValid = checkHTML(html);console.log(isValid) $('div').html(isValid ? html : 'HTML is not valid!'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea cols="80" rows="7">&lt;div&gt;Some HTML</textarea> <button style="vertical-align:top">Check</button> <div></div>