Spostare la string in JavaScript e rilevare la rottura di linea

Ho una piccola function che ho trovato che prende una string da una textarea e poi lo mette in un elemento di canvas e avvolge il text quando la linea diventa troppo lunga. Ma non rileva interruzioni di linea. Questo è ciò che sta facendo e cosa deve fare:

Ingresso:

 Hello This is dummy text that could be inside the text area. It will then get put into the canvas. 

Uscita errata:

 Hello this is dummy text that could be inside the text area. It will then get put into the canvas. 

Che cosa dovrebbe produrre:

 Hello This is dummy text that could be inside the text area. It will then get put into the canvas. 

Questa è la function che sto usando:

 function wrapText(context, text, x, y, maxWidth, lineHeight) { var words = text.split(' '); var line = ''; for(var n = 0; n < words.length; n++) { var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { context.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } } context.fillText(line, x, y); } 

È ansible get quello che sto cercando di get? Oppure c'è un modo per spostare semplicemente l'area di text come nella canvas?

Utilizzare quanto segue:

 var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; alert('Number of breaks: ' + numberOfLineBreaks); 

DEMO

Ora quello che ho fatto è stato quello di dividere la string prima utilizzando linebreaks, e poi dividere di nuovo come hai fatto prima. Nota: è anche ansible utilizzare jQuery combinato con regex per questo:

 var splitted = $('#textArea').val().split("\n"); // will split on line breaks 

Spero che ciò ti aiuti!

(Nota: questa domanda è stata già posta una sola volta).

Nel caso in cui è necessario dividere una string dal JSON, la string ha sostituito il carattere speciale \ n con \\ n.

Stringa divisa per newline:

 Result.split('\n'); 

La string Split è stata ricevuta in JSON, where il carattere speciale \ n è stato sostituito da \\ n durante JSON.stringify (in javascript) o json.json_encode (in PHP). Quindi, se hai la string in una risposta AJAX, è stata elaborata per il trasporto. e se non è decodificato, avrà \ n sostituito con \\ n ** e devi usare:

 Result.split('\\n'); 

Tieni presente che gli strumenti di debugger dal tuo browser potrebbero non mostrare questo aspetto come ti aspettavo, ma puoi vedere che la suddivisione con \\ n ha portto a 2 voci come ho bisogno nel mio caso: immettere qui la descrizione dell'immagine

Ecco il codice finale utilizzato da [OP]. Probabilmente non pratica migliore, ma ha funzionato.

 function wrapText(context, text, x, y, maxWidth, lineHeight) { var breaks = text.split('\n'); var newLines = ""; for(var i = 0; i < breaks.length; i ++){ newLines = newLines + breaks[i] + ' breakLine '; } var words = newLines.split(' '); var line = ''; console.log(words); for(var n = 0; n < words.length; n++) { if(words[n] != 'breakLine'){ var testLine = line + words[n] + ' '; var metrics = context.measureText(testLine); var testWidth = metrics.width; if (testWidth > maxWidth && n > 0) { context.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { line = testLine; } }else{ context.fillText(line, x, y); line = ''; y += lineHeight; } } context.fillText(line, x, y); } 

Questo è ciò che ho usato per printingre il text su una canvas. L'input non è proveniente da un textarea , ma da input e sto solo divisione per spazio. Sicuramente non perfetto, ma funziona per il mio caso. Restituisce le righe in una matrix:

 splitTextToLines: function (text) { var idealSplit = 7, maxSplit = 20, lineCounter = 0, lineIndex = 0, lines = [""], ch, i; for (i = 0; i < text.length; i++) { ch = text[i]; if ((lineCounter >= idealSplit && ch === " ") || lineCounter >= maxSplit) { ch = ""; lineCounter = -1; lineIndex++; lines.push(""); } lines[lineIndex] += ch; lineCounter++; } return lines; } 

Dovresti provare a rilevare la prima linea.

Poi il:

 if(n == 0){ line = words[n]+"\n"; } 

Non sono sicuro, ma forse lo aiuta.