Question

也许我对此感到困惑，但我有一段代码如下：

$("#myButton").on('click', function(){
    var myValue = $('#myInput').val();
    listSize++;

    var listItem = "<li>" + myValue + "<input type='hidden' name='foo" +
        listSize + "' value='" + myValue + "' /></li>";
    $("ol.myList").append(listItem);
});

如果文本输入值包含例如'，则此代码会在正确添加隐藏输入值方面中断。

我当时认为使用encodeURIComponent可以解决问题，但事实并非如此。

处理此问题的正确方法是什么？

Answer 1

使用val()创建实际元素并使用$("#myButton").on('click', function(){ // sanitize any html in the existing input var myValue = $('<div>', {text:$('#myInput').val())).text(); listSize++; // create new elements var $listItem = $("<li>",{text: myValue}); // set value of input after creating the element var $input = $('<input>',{ type:'hidden', name:'foo'+listSize}).val(myValue); //append input to list item $listItem.append($input); // append in dom $("ol.myList").append($listItem); });设置 value属性，而不是使用html字符串执行此操作。

通过首先将字符串作为文本插入内容元素并将其作为文本检索，您可以清除任何可能的html。

请注意， value属性不会在html中呈现与 value属性相同，因此引号不是问题

run

Answer 2

我认为这就是你要找的东西：

$("#myButton").on('click', function(){
    var myValue = $('#myInput').val();
    listSize++;


    var listItemHTML = "<li>" + myValue + "<input type='hidden' name='foo'></li>";
    $(listItemHTML).appendTo('ol.myList').find('input[type=hidden]').val(myValue);
});

appendTo函数返回对刚刚附加的元素的引用。在元素上调用val（）函数会使引号的插入无效，因为它将被解释为实际值。

Answer 3

最安全的方法是编写包装器

function addslashes (str) {
     return (str + '')
    .replace(/[\\"']/g, '\\$&')
    .replace(/\u0000/g, '\\0')
}

var test= "Mr. Jone's car";

console.log(addslashes(test));
//"Mr. Jone\'s car"

使用jQuery清理输入以保持隐藏的输入值

3 个答案: