javascript - poner - salto de linea/n

Separar cadena en JavaScript y detectar salto de línea

Question

Tengo una pequeña función que encontré que toma una cadena de un área de textarea y luego la coloca en un elemento canvas y envuelve el texto cuando la línea es demasiado larga. Pero no detecta saltos de línea. Esto es lo que está haciendo y lo que debería hacer:

Entrada:

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

Salida incorrecta:

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

Lo que debería salir:

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

Esta es la función que estoy 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);
}

¿Es posible lograr lo que intento obtener? ¿O hay una manera de simplemente mover el área de texto como está en el lienzo?

Answer 1

Aquí está el código final que utilicé [OP]. Probablemente no sea la mejor práctica, pero funcionó.

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

Answer 2

Deberías tratar de detectar la primera línea.

Entonces el:

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

No estoy seguro, pero tal vez ayuda.

Answer 3

En caso de que necesite dividir una cadena de su JSON, la cadena tiene / n el carácter especial reemplazado por // n.

División de cadena por nueva línea:

Result.split(''/n'');

Split string recibido en JSON, donde el carácter especial / n fue reemplazado por // n durante JSON.stringify (en javascript) o json.json_encode (en PHP). Entonces, si tiene su cadena en una respuesta AJAX, fue procesada para su transporte. y si no se decodifica, tendrá el / n reemplazado por // n ** y deberá usar:

Result.split(''//n'');

Tenga en cuenta que las herramientas de depuración de su navegador pueden no mostrar este aspecto como esperaba, pero puede ver que la división por // n dio como resultado 2 entradas que necesito en mi caso:

Answer 4

Esto es lo que utilicé para imprimir texto en un lienzo. La entrada no proviene de un área de textarea , sino de la input y solo estoy dividiendo por espacio. Definitivamente no es perfecto, pero funciona para mi caso. Devuelve las líneas en una matriz:

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

Answer 5

Use lo siguiente:

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

DEMO

Ahora lo que hice fue dividir la cadena primero usando saltos de línea, y luego dividirla de nuevo como lo hacía antes. Nota: también puede usar jQuery combinado con expresiones regulares para esto:

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

¡Espero que te ayude!

(Nota: esta pregunta ya fue hecha una vez here ).