Sanitizing Eingang mit jQuery in einen versteckten Eingabewert zu halten

Question

Vielleicht ich das ein bisschen bin verwirrend, aber ich habe ein Stück Code, der wie das funktioniert folgendermaßen vor:

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

Wenn der Texteingabewert zum Beispiel enthält , ein ', dann bricht dieser Code in Bezug auf das korrekte Hinzufügen des versteckten Eingabewerts.

Ich dachte, dass die Verwendung von würde den Trick tun, aber es nicht.

Was ist der richtige Weg, damit umzugehen?

Answer 1

Statt dies zu tun, mit HTML-Strings, erstellen Sie ein aktuelles Element zu schreiben und setzt es Wert Eigenschaft mit val().

Sie können jedes mögliche html dadurch bereinigen, indem Sie zuerst die Zeichenkette in ein Inhaltselement als Text einfügen und sie als Text abrufen.

Beachten Sie, dass die Wert Eigenschaft nicht in den HTML-Code der gleiche wie Wert Attribut gerendert bekommen tut so Anführungszeichen sind kein Problem

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

Answer 2

Ich denke, das ist das, was Sie suchen:

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

Die appendTo Funktion einen Verweis auf die gerade angehängten Element zurückgibt. Durch Aufruf der Funktion val() für das Element wird das Einfügen eines Zitats unbrauchbar, da es als tatsächlicher Wert interpretiert wird.

Answer 3

Sicherster Weg wäre ein Wrapper

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"