特殊字符打破了从 HTML 字符串创建 jQuery dom答案

【问题标题】：Special character breaks jQuery dom creation from HTML string特殊字符打破了从 HTML 字符串创建 jQuery dom
【发布时间】：2017-10-06 14:40:03
【问题描述】：

我正在使用 jQuery 从输入文本字段中删除不需要的 html 标记。这很好用，但是，当一个特殊字符作为 html 实体输入时，例如 &trade;（我想允许），我在动态 DOM 创建过程中收到以下错误：

语法错误，无法识别的表达式：...&trade;

想法是从文本字段中获取html字符串；从中创建一个 DOM 元素；然后，只删除不需要的标签。

像：My company 这样的数据被清理到 My company ...我所期望的。

但是输入的数据如下：My company &trade; 中断

var s = jQuery(this).find('#new-topic').val();
var $s = jQuery(s); //this is where the error occurs
var $elements = $s.find("*").not("b, strong"); //get elements that are not <b> or <strong>

for (var i = $elements.length - 1; i >= 0; i--) {
  var e = $elements[i];
  jQuery(e).replaceWith(e.innerHTML);
}

var finalInput = $s.html();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="new-topic" type="text">

在这种情况下是否允许特殊字符？

【问题讨论】：

标签： jquery html dom special-characters

【解决方案1】：

实际上是当从文本字段中捕获的字符串未包含在标签中时引起的；例如：My company &trade; 但是My company &trade; 确实有效。当没有标签输入到文本字段中时，这也会产生一些不良行为，例如：My company。为了解决这个问题，我总是在创建 DOM 元素之前将字符串包装在标签中：s = '<test>'+s+'</test>';

jQuery('#remove-unwanted-tags').on('click', function() {
    var s = jQuery('#new-topic').val();
    console.log('Before removing unwanted tags: ' + s);
    s = '<test>' + s + '</test>'; //added fix
    var $s = jQuery(s); //this is where the error occurs
    var $elements = $s.find("*").not("b, strong"); //get elements that are not <b> or <strong>
    
    for (var i = $elements.length - 1; i >= 0; i--) {
        var e = $elements[i];
        jQuery(e).replaceWith(e.innerHTML);
    }
    
    var finalInput = $s.html();
    console.log('After removing unwanted tags: ' + finalInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="new-topic" type="text">
<input type="button" id="remove-unwanted-tags" value="remove unwanted tags">

不确定这是否是清除不需要标签的属性的最佳方法，但至少它有效。

【讨论】：