new - javascript text
¿Cómo puedo insertar nuevos retornos de línea/carro en un element.textContent? (9)
El siguiente código funciona bien (en Firefox, IE y Chrome):
var display_out = "This is line 1" + "<br>" + "This is line 2";
document.getElementById("demo").innerHTML = display_out;
Por tonto que parezca, todavía no he encontrado una respuesta adecuada.
Digamos que quiero crear dinámicamente un nuevo elemento DOM y rellenar su textContent / innerText con un literal de cadena JS.
La cadena es tan larga que me gustaría dividirla en tres partes:
var h1 = document.createElement("h1");
h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE...
so this text will display in a new line";
El problema es que si escribo.
h1.textContent = "...I would like to insert a carriage return here... /n";
no funciona, probablemente porque el navegador considera que ''/ n'' es solo texto y lo muestra como tal (el / r tampoco funciona).
Por otro lado, podría cambiar el h1.innerHTML en lugar del contenido de texto y escribir:
h1.innerHTML = "...I would like to insert a carriage return here...<br />";
Aquí el <br /> haría el trabajo, pero hacerlo no solo reemplazaría el contenido del texto, sino todo el contenido HTML de mi h1, que no es exactamente lo que quiero.
¿Hay una manera sencilla de resolver mi problema?
No recurriría a la creación de varios elementos de bloque para tener el texto en líneas diferentes.
Cualquier idea sería muy apreciada.
Gracias por adelantado.
Encontré que insertar //n funciona. Es decir, te escapas del nuevo personaje de la línea escapada.
La respuesta de nelek es la mejor publicada hasta ahora, pero se basa en establecer el valor css: espacio en blanco: pre, lo que puede ser indeseable.
Me gustaría ofrecer una solución diferente, que trata de abordar la pregunta real que debería haberse formulado aquí:
"¿Cómo insertar texto no confiable en un elemento DOM?"
Si confías en el texto, ¿por qué no usar solo innerHTML?
domElement.innerHTML = trustedText.replace(//r/g, '''').replace(//n/g, ''<br>'');
Debe ser suficiente para todos los casos razonables.
Si decidió que debería usar .textContent en lugar de .innerHTML, significa que no confía en el texto que está a punto de insertar, ¿verdad? Esta es una preocupación razonable.
Por ejemplo, tiene un formulario donde el usuario puede crear una publicación, y después de publicarla, el texto de la publicación se almacena en su base de datos y luego se adjunta a las páginas cuando otros usuarios visitan la página correspondiente.
Si usas innerHTML aquí, obtienes un fallo de seguridad. es decir, un usuario puede publicar algo como
[script]alert(1);[/script]
(trate de imaginar que [] son <>, ¡aparentemente el desbordamiento de pila está agregando texto de manera insegura!)
lo que no activará una alerta si usa innerHTML, pero debería darle una idea de por qué el uso de innerHTML puede tener problemas. un usuario más inteligente publicaría
[img src="invalid_src" onerror="alert(1)"]
lo que provocaría una alerta para todos los demás usuarios que visitan la página. Ahora tenemos un problema. Un usuario aún más inteligente pondría display: none en ese estilo img, y lo haría publicar las cookies del usuario actual en un sitio de dominio cruzado. Enhorabuena, todos sus datos de inicio de sesión de usuario ahora están expuestos en Internet.
Por lo tanto, lo importante es entender que el uso de innerHTML no es incorrecto, es perfecto si lo está utilizando para crear plantillas utilizando solo su propio código de desarrollador de confianza. La verdadera pregunta debería haber sido "¿Cómo agrego texto de usuario no confiable que tenga nuevas líneas a mi documento HTML?".
Esto plantea una pregunta: ¿qué estrategia utilizamos para las nuevas líneas? ¿Usamos [br] elementos? [p] s o [div] s?
Aquí hay una función corta que resuelve el problema:
function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
domElement.innerHTML = '''';
var lines = untrustedText.replace(//r/g, '''').split(''/n'');
var linesLength = lines.length;
if(newlineStrategy === ''br'') {
for(var i = 0; i < linesLength; i++) {
domElement.appendChild(document.createTextNode(lines[i]));
domElement.appendChild(document.createElement(''br''));
}
}
else {
for(var i = 0; i < linesLength; i++) {
var lineElement = document.createElement(newlineStrategy);
lineElement.textContent = lines[i];
domElement.appendChild(lineElement);
}
}
}
Básicamente, puede lanzar esto en algún lugar de su archivo common_functions.js y luego simplemente disparar y olvidar cada vez que necesite agregar cualquier usuario / api / etc -> texto no confiable (es decir, no escrito por su propio desarrollador-equipo) para sus páginas html.
ejemplo de uso:
insertUntrustedText(document.querySelector(''.myTextParent''), ''line1/nline2/r/nline3'', ''br'');
el parámetro newlineStrategy solo acepta etiquetas válidas de elementos dom, por lo que si desea [br] nuevas líneas, pase ''br'', si desea que cada línea esté en un elemento [p], pase ''p'', etc.
Me encontré con esto hace un tiempo. Descubrí que una buena solución era utilizar la representación ASCII de retornos de carro (CÓDIGO 13). JavaScript tiene una característica útil llamada String.fromCharCode() que genera la versión de cadena de un código ASCII, o varios códigos separados por una coma. En mi caso, necesitaba generar un archivo CSV a partir de una cadena larga y escribirlo en un área de texto. Necesitaba poder cortar el texto del área de texto y guardarlo en el bloc de notas. Cuando intenté usar el método <br /> no conservaría los retornos de carro, sin embargo, utilizando el método fromCharCode retiene los retornos. Ver mi código a continuación:
h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);
Consulte aquí para obtener más detalles sobre este método: w3Schools-fromCharCode()
Vea aquí para códigos ASCII : Códigos ASCII
Ninguna de las soluciones anteriores funcionó para mí. Estaba intentando agregar un avance de línea y texto adicional a un elemento <p> . Normalmente uso Firefox, pero necesito compatibilidad con el navegador. Leí que solo Firefox admite la propiedad textContent , solo Internet Explorer es compatible con la propiedad innerText , pero ambos admiten la propiedad innerHTML . Sin embargo, ni agregar <br /> ni /n ni /r/n a ninguna de esas propiedades resultó en una nueva línea. Lo siguiente, sin embargo, funcionó:
<html>
<body>
<script type="text/javascript">
function modifyParagraph() {
var p;
p=document.getElementById("paragraphID");
p.appendChild(document.createElement("br"));
p.appendChild(document.createTextNode("Additional text."));
}
</script>
<p id="paragraphID">Original text.</p>
<input type="button" id="pbutton" value="Modify Paragraph" onClick="modifyParagraph()" />
</body>
</html>
Puede usar expresiones regulares para reemplazar los caracteres ''/ n'' o ''/ n / r'' con ''<br />''.
Tu tienes esto:
var h1 = document.createElement("h1");
h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE...
so this text will display in a new line";
Puedes reemplazar tus personajes así:
h1.innerHTML = h1.innerHTML.replace(//n/r?/g, ''<br />'');
verifique la referencia de javascript para los objetos String y Regex:
Puedes concatenar las cuerdas ...
h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";
Sé que esta pregunta publicada hace mucho tiempo.
Hace unos días tuve un problema similar, pasé valor del servicio web en formato json y lo contentText en la table cell contentText .
Debido a que el valor se pasa en formato, por ejemplo, "text row1/r/ntext row2" y así sucesivamente.
Para nueva línea en textContent , tiene que usar /r/n y, finalmente, tuve que usar css white-space: pre-line; (El texto se ajustará cuando sea necesario y en los saltos de línea) y todo irá bien.
O bien, puedes usar solo white-space: pre; y luego el texto se ajustará solo en los saltos de línea (en este caso /r/n ).
Por lo tanto, hay un ejemplo de cómo resolverlo con texto de recorte solo en los saltos de línea:
var h1 = document.createElement("h1");
//setting this css style solving problem with new line in textContent
h1.setAttribute(''style'', ''white-space: pre;'');
//add /r/n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return /r/n...";
h1.textContent += "moreover, I would like to insert another carriage return /r/n...";
h1.textContent += "so this text will display in a new line";
document.body.appendChild(h1);
Use element.innerHTML="some ////n some"; .