Come posso inserire nuovi ritorni di riga / carrello in un elemento.textContent?

Per quanto possa sembrare sciocco, non ho ancora trovato una risposta appropriata.

Diciamo che voglio creare dynamicmente un nuovo elemento DOM e riempire il suo textContent / innerText con una stringa JS letterale.
La stringa è così lunga che vorrei dividerla in tre blocchi:

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

Il problema è che se scrivo

 h1.textContent = "...I would like to insert a carriage return here... \n"; 

non funziona, probabilmente perché il browser considera “\ n” come puro testo e lo visualizza come tale (anche \ r non funziona).

D’altra parte, potrei cambiare h1.innerHTML anziché textContent e scrivere:

 h1.innerHTML = "...I would like to insert a carriage return here...
";

Qui il
farebbe il lavoro, ma farlo sostituirà non solo il contenuto del testo ma tutto il contenuto HTML del mio h1, che non è proprio quello che voglio.

C’è un modo semplice per risolvere il mio problema?
Non vorrei ricorrere alla creazione di più elementi di blocco solo per avere il testo su linee diverse.
Qualsiasi idea sarebbe molto apprezzata.
Grazie in anticipo.

So che questa domanda è stata postata molto tempo fa.

Ho avuto un problema simile qualche giorno fa, passando il valore dal servizio web in formato json e lo ho contentText nella table contentText .

Poiché il valore viene passato in formato, ad esempio "text row1\r\ntext row2" e così via.

Per la nuova riga in textContent Devi usare \r\n e, infine, ho dovuto usare css white-space: pre-line; (Il testo si avvolgerà quando necessario e le interruzioni in linea) e tutto andrà bene.

Oppure, puoi utilizzare solo white-space: pre; e quindi il testo si occuperà solo delle interruzioni di riga (in questo caso \r\n ).

Quindi, c’è un esempio su come risolverlo con il testo a capo solo nelle interruzioni di riga:

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

Mi sono imbattuto in questo tempo fa. Ho trovato che una buona soluzione era usare la rappresentazione ASCII dei ritorni a capo (CODICE 13). JavaScript ha una comoda funzionalità chiamata String.fromCharCode() che genera la versione di stringa di un codice ASCII o più codici separati da una virgola. Nel mio caso, avevo bisogno di generare un file CSV da una lunga stringa e scriverlo in un’area di testo. Dovevo essere in grado di tagliare il testo dall’area di testo e salvarlo nel blocco note. Quando ho provato ad usare il metodo
non preservava i ritorni a capo, tuttavia, usando il metodo fromCharCode, mantiene i ritorni. Vedi il mio codice qui sotto:

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

Vedi qui per maggiori dettagli su questo metodo: w3Schools-fromCharCode ()

Vedi qui per i codici ASCII : Codici ASCII

Potresti usare le espressioni regolari per sostituire i caratteri ‘\ n’ o ‘\ n \ r’ con ‘
‘.

tu hai questo:

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

puoi sostituire i tuoi personaggi in questo modo:

 h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '
');

controlla il riferimento javascript per gli oggetti String e Regex:

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Puoi concatenare le stringhe …

 h1.innerHTML += "...I would like to insert a carriage return here...
"; h1.innerHTML += "Ant the other line here...
"; h1.innerHTML += "And so on...
";

jsFiddle.

Usa element.innerHTML="some \\\\n some"; .

Nessuna delle soluzioni di cui sopra ha funzionato per me. Stavo cercando di aggiungere un avanzamento riga e del testo aggiuntivo a un elemento

. Io di solito uso Firefox, ma ho bisogno della compatibilità del browser. Ho letto che solo Firefox supporta la proprietà textContent , solo Internet Explorer supporta la proprietà innerText , ma entrambi supportano la proprietà innerHTML . Tuttavia, né l’aggiunta di
né di \n né di \r\n a nessuna di queste proprietà ha portato a una nuova riga. Il seguente, tuttavia, ha funzionato:

    

Original text.

Ho trovato che l’inserimento di \\n funziona. Cioè, sfuggi al personaggio della nuova linea sfuggita

Il seguente codice funziona bene (su FireFox, IE e Chrome):

 var display_out = "This is line 1" + "
" + "This is line 2"; document.getElementById("demo").innerHTML = display_out;

la risposta di nelek è la migliore pubblicata finora, ma si basa sull’impostazione del valore css: white-space: pre, che potrebbe non essere desiderabile.

Mi piacerebbe offrire una soluzione diversa, che cerchi di affrontare la vera domanda che avrebbe dovuto essere posta qui:

“Come inserire testo non affidabile in un elemento DOM?”

Se ti fidi del testo, perché non usare semplicemente innerHTML?

 domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '
');

dovrebbe essere sufficiente per tutti i casi ragionevoli.

Se hai deciso di utilizzare .textContent anziché .innerHTML, significa che non ti fidi del testo che stai per inserire, giusto? Questa è una preoccupazione ragionevole.

Ad esempio, si dispone di un modulo in cui l’utente può creare un post e, dopo averlo pubblicato, il testo del post viene archiviato nel database e in seguito aggiunto alle pagine ogni volta che altri utenti visitano la pagina pertinente.

Se si utilizza innerHTML qui, si ottiene una violazione della sicurezza. cioè, un utente può pubblicare qualcosa del genere

 [script]alert(1);[/script] 

(prova ad immaginare che [] sono <>, apparentemente lo stack overflow sta aggiungendo il testo in modi non sicuri!)

che non innescherà un avviso se utilizzi innerHTML, ma dovrebbe darti un’idea del perché l’uso di innerHTML possa avere problemi. un utente più intelligente avrebbe pubblicato

 [img src="invalid_src" onerror="alert(1)"] 

che attiverà un avviso per ogni altro utente che visita la pagina. Ora abbiamo un problema Un utente ancora più intelligente metterebbe il display: nessuno su quello stile img, e farlo pubblicare i cookie dell’utente corrente su un sito interdominio. Congratulazioni, tutti i dettagli di accesso dell’utente sono ora esposti su Internet.

Quindi, la cosa importante da capire è che l’uso di innerHTML non è sbagliato, è perfetto se lo si utilizza solo per creare modelli utilizzando solo il proprio codice di sviluppatori attendibili. La vera domanda avrebbe dovuto essere “come appendo il testo utente non attendibile che ha newline al mio documento HTML”.

Ciò solleva una domanda: quale strategia usiamo per le newline? usiamo [br] elementi? [p] s o [div] s?

Ecco una breve funzione che risolve il 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); } } } 

Puoi fondamentalmente buttarlo da qualche parte nel tuo file common_functions.js e poi semplicemente sparare e dimenticare ogni volta che devi aggiungere un qualsiasi utente / api / etc -> testo non affidabile (cioè non scritto-dal-tuo-sviluppatore-team) a le tue pagine html.

esempio di utilizzo:

 insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br'); 

il parametro newlineStrategy accetta solo tag elemento dom validi, quindi se si desidera [br] newlines, passare 'br', se si desidera che ogni riga in un elemento [p], passare 'p', ecc.