Come evitare le citazioni durante la creazione di una casella di testo in jquery/javascript?

Question

Ho un paio di elementi span e ho bisogno di ottenere il contenuto di questi elementi span in una casella di testo in modo che l'utente possa modificare.

Potrebbe esserci un numero qualsiasi di elementi di span, quindi le caselle di testo devono essere create in fase di runtime. Il problema che sto avendo è che quando il testo contiene un singolo citazioni, è che pasticciano con i miei valori casella di testo dal momento che chiude una delle citazioni ..

Questo è come mi sto creando il mio testo:

var spanContent = $(value).text(); 
var tmpTextBox = "<input type='text' id='t" + index + "' value='" + spanContent + "' class='dynTxt' />"; 

Avviso il valore = ' '+ spanContent +'' parte, questo è dove sta rompendo se spanContent ha una sola offerta in esso .. Ora, so che posso fare questo:

value = \"" + spanContent + "\" 

che funziona bene .. ma, quando il spanContent ha le doppie virgolette, si interrompe di nuovo ..

Qual è il modo più sicuro per evitare sia le virgolette singole che le doppie virgolette in questa situazione, per favore? Non posso html codificare loro, perché i valori della casella di testo non sono supportati dal ..

Ho creato una piccola riproduzione di questo on jsfiddle here per voi a giocare con ..

Grazie.

Answer 1

Per i principianti, se stai utilizzando jQuery, sfrutta il vantaggio di quanto modulare possa essere la creazione di elementi. Non solo si scrivono male gli elementi HTML dal punto di vista della sicurezza, ma anche gli errori (come stabilito). Tuttavia, sarete felici di sapere che c'è sempre un modo migliore:

var input = $('<input />',{ 
    'type': 'text', 
    'id': 't'+index, 
    'value': spanContent, 
    'class': 'dynTxt' 
}); 

Ora avete un nuovo <input> elemento che può essere collegato, manipolato, ecc Si può anche farlo nel modo "lungo":

var input = $('<input />') 
    .attr({'type':'text','id':'t'+index}) 
    .val(spanContent) 
    .addClass('dynTxt'); 

che si traduce in uno stesso elemento viene generata:

<input type="text" id="t_index_" value="_spanContent_" class="dynTxt" /> 

la parte migliore è che i problemi (come virgolette) sarà risolto per voi, lasciandovi a scrivere solo il contenuto hai bisogno.

Answer 2

var tmpTextBox = $("<input>", { 
    type: "text", 
    id: "t" + index, 
    val: spanContent, 
    'class': "dynTxt" 
}); 

Fiddle

Answer 3

Invece di cercare di concatenare le stringhe, come circa l'impostazione del valore dopo aver creato l'elemento?

var spanContent = $(value).text(); 
var tmpTextBox = "<input type='text' id='t" + index + "' class='dynTxt' />"; 
$('#container').append($(tmpTextBox).val(spanContent)); 

Ecco la vostra aggiornato jsFiddle mostrando in azione: Fiddle

Sembra che tutti abbiamo detto più o meno la stessa cosa. Come menzionato nelle altre risposte, puoi applicare questa stessa idea generale a tutti gli attributi, non solo al valore.

Answer 4

Un'opzione un po 'pesante, se il testo verrà sempre utilizzato come testo contrassegnato in un browser, è quello di sostituire tutte le virgolette singole con la relativa rappresentazione HTML ascii.In questo caso:

var spanContent = $(value).text().replace("'", "'"); 

ha l'effetto desiderato.

Answer 5

var tf = document.createElement("input"); 
tf.setAttribute("type","input"); 
tf.setAttribute("name","_tf"); 
var txt = "Hello. This using slash \\ quote \""; 
tf.setAttribute("value",txt); 
document.childNodes[1].appendChild(tf); 

Questo è semplicemente in puro JavaScript di lavoro dal vivo jsbin