javascript - 如何使用 jQuery 转义表单元素中的双引号和 html 标签？

Question

HTML:

Input: <span id="form"></span>

JavaScript:

var title = 'inside "<h1>outside?</h1>';
var inserted_data = '<input type="text" value=' + title + '>';
$("#form").html(inserted_data);

https://jsfiddle.net/uk7h8sw7/

结果很奇怪。 inside 位于表单字段内，而 outside 位于表单字段外部。而且标签几乎完全丢失。

如何转义双引号和 HTML 标记，以免出现这样的情况？

Answer 1

您错过了 value 属性的引号:

value=' + title + '

改用这个:

 value=\'' + title + '\'

var title = 'inside "<h1>outside?</h1>';
var inserted_data = '<input type="text" value=\'' + title + '\'/>';
$("#form").html(inserted_data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input: <span id="form"></span>

更合适的解决方案是:

var titles = ['inside "<h1>outside?</h1>', 'inside\'>out'];

$.each(titles, function(_, title) {
  $('<input>').prop({
    'type': 'text',
    'value': title
  }).appendTo('#form');
});

input {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input: <span id="form"></span>