Javascript 清理输入以使用jQuery粘贴到隐藏的输入值

也许我有点混淆了这一点，但我有一段代码如下所示：

$("#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);
});

$（“#我的按钮”）。在（'click'，function（）上{
var myValue=$（'#myInput'）.val（）；
listSize++；
var listItem=“
”+myValue+”
”；
$（“ol.myList”）.append（列表项）；
});

如果文本输入值包含例如

“

，则此代码在正确添加隐藏输入值方面会中断

我原以为使用

encodeURIComponent

就可以了，但事实并非如此

---

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

我想这就是你想要的：

$("#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);
});

$（“#我的按钮”）。在（'click'，function（）上{
var myValue=$（'#myInput'）.val（）；
listSize++；
var listItemHTML=“
”+myValue+”
”；
$（listItemHTML）.appendTo（'ol.myList'）.find（'input[type=hidden]'））.val（myValue）；
});

appendTo函数返回对刚刚附加的元素的引用。

---

对元素调用val（）函数将导致插入引号无效，因为它将被解释为实际值。

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

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"

---

不要对html字符串执行此操作，而是创建一个实际元素，并使用

val（）

设置它的value属性

您可以先将字符串作为文本插入到内容元素中，然后作为文本检索它，从而清除其中任何可能的html

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

$("#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);
});

$（“#我的按钮”）。在（'click'，function（）上{
//清理现有输入中的任何html
var myValue=$（''，{text:$（'#myInput'）.val（））.text（）；
listSize++；
//创造新元素
var$listItem=$（“
”，{text:myValue}）；
//创建元素后设置输入值
var$input=$（''，{type:'hidden'，name:'foo'+listSize}）.val（myValue）；
//将输入附加到列表项
$listItem.append（$input）；
//在dom中追加
$（“ol.myList”）.append（$listItem）；
});

如果先添加列表项，然后使用$（elem）.val（）设置值，会怎么样？有道理。我不认为这在问题的范围内。我第一次误解了你的问题。事实上，我发送的小提琴没有回答你的问题。我打算添加我自己的答案，以保持初始代码接近已经存在的代码，并在设置val之前简单地添加.append，但是这个答案有点不合理一种不同的方法来接近它并起作用，因此会将其标记为正确