如何验证或包装用户输入的 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>