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