Question

我有一个文本框，用户可以输入格式化文本或原始HTML。一切正常，但是用户没有关闭标签（如粗体标签），然后它会破坏所有HTML格式（它全部变为粗体）。

有没有办法验证用户的输入，自动关闭标签，或以某种方式将用户输入包装在一个元素中以阻止它泄漏？

Answer 1

$.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>

如何验证或包装用户输入的HTML以修复未关闭的标签

5 个答案: