¿Cómo se pueden escapar las comillas al crear un cuadro de texto en jquery/javascript?

Question

Tengo un par de elementos span y necesito obtener el contenido de estos elementos span en un cuadro de texto para que el usuario pueda editar.

Puede haber cualquier número de elementos de span, por lo que los cuadros de texto deben crearse en tiempo de ejecución. El problema que estoy teniendo es que cuando el texto contiene unas comillas simples, que está jugando con mis valores de los cuadros de texto, ya que cierra una de las citas ..

Esta es la forma en que estoy creando mi caja de texto:

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

Aviso el valor = ' '+ spanContent +'' parte, esto es en donde está rompiendo si spanContent tiene una comilla simple en ella .. Ahora, sé que puedo hacer esto:

value = \"" + spanContent + "\" 

que trabaja bien ... pero, cuando el spanContent tiene comillas dobles, se rompe nuevamente ..

¿Cuál es la forma más segura de evitar tanto las comillas simples como las comillas dobles en esta situación, por favor? No puedo html los codificará porque los valores de cuadro de texto no es compatible con ellos ..

He creado una pequeña reproducción de este on jsfiddle here para jugar con ..

Gracias.

Answer 1

Para empezar, si usa jQuery aproveche la modularidad que puede tener al crear elementos. No solo es malo escribir los elementos HTML desde una perspectiva de seguridad, también es propenso a errores (como ya se ha establecido). Sin embargo, te alegrará saber que siempre hay una mejor manera:

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

Ahora usted tienen un nuevo elemento <input> que se puede conectar, manipulado, etc. También puede hacerlo de la forma "larga":

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

que se traduce en un mismo elemento que se generan:

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

la mejor parte es que se solucionará cualquier problema (como comillas) para usted, dejando que se acaba de escribir el contenido necesitas.

Answer 2

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

Fiddle

Answer 3

lugar de tratar de concatenar las cadenas, ¿qué hay de establecer el valor después de crear el elemento?

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

Aquí está su actualización jsFiddle mostrando esto en acción: Fiddle

Parece que todos nos dijo más o menos lo mismo. Como se menciona en las otras respuestas, puede aplicar esta misma idea general a todos los atributos, no solo a los valores.

Answer 4

Una opción un tanto torpe, si el texto solo se va a utilizar como texto marcado en un navegador, es reemplazar todas las comillas simples con su representación ASCII HTML.En este caso:

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

tiene el efecto deseado.

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); 

Esto es simplemente en javascript puro trabajo vivo jsbin