如何在使用jquery的表单元素中转义双引号和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标记，使其不会像这样搞砸？

为什么标题有一双报价和问号？ – cosmoonot

我正在努力为用户输入奇怪的东西做准备。目前，如果用户输入一个双引号，然后当我显示他们输入的表单时，情况就会变得很奇怪。 –

基本上你想删除任何HTML标签并只显示文本，对吗？ – cosmoonot

答

你错过了引号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>

编辑：2017年4月16日，下午12时52 IST

更合适的解决方案：

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>

这真的很有帮助，但现在我发现它不起作用，如果我的标题是这样的：'var title ='out';' –

@TomFreezers，请检查我更新的帖子 – Arvind

答

您可以使用jQuery(html, attributes)

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>

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

相关推荐