wake-up-neo.net

Zeichenfolge in JavaScript aufteilen und Zeilenumbruch erkennen

Ich habe eine kleine Funktion gefunden, die einen String aus einer textarea entnimmt, ihn dann in ein canvas-Element einfügt und den Text umschließt, wenn die Zeile zu lang wird. Es werden jedoch keine Zeilenumbrüche erkannt. Dies ist, was es tut und was es tun sollte:

Eingang:

Hello

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

Falsche Ausgabe:

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

Was soll es ausgeben:

Hello

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

Diese Funktion verwende ich:

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

Kann ich erreichen, was ich erreichen möchte? Oder gibt es eine Möglichkeit, den Textbereich einfach auf die Leinwand zu verschieben?

javascriptstringcanvassplitline-breaks
32
Dustin Silk

Verwenden Sie folgendes:

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

DEMO

Nun habe ich die Zeichenfolge first mit Zeilenumbrüchen geteilt und sie dann wie zuvor wieder geteilt. Hinweis: Sie können auch jQuery in Kombination mit Regex verwenden:

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

Hoffe das hilft dir raus!

(Anmerkung: Diese Frage wurde bereits einmal hier ) gestellt.

53
Jean-Paul

Falls Sie eine Zeichenfolge von Ihrem JSON trennen müssen, wird das Sonderzeichen\n durch \\ n ersetzt.

Zeichenfolge nach Zeilenumbruch teilen:

Result.split('\n');

Geteilter String, der in JSON empfangen wurde, wobei das Sonderzeichen \ n bei JSON.stringify (in Javascript) oder json.json_encode (in PHP) durch \\ n ersetzt wurde. Wenn Sie also Ihren String in einer Antwort AJAX haben, wurde er für den Transport verarbeitet. Wenn es nicht dekodiert wird, wird\n\n\n durch \\ n ** ersetzt, und Sie müssen Folgendes verwenden:

Result.split('\\n');

Beachten Sie, dass die Debugger-Tools Ihres Browsers diesen Aspekt möglicherweise nicht wie erwartet anzeigen. Sie können jedoch feststellen, dass die Aufteilung durch \\ n zu zwei Einträgen führte, die ich in meinem Fall benötige:  enter image description here

4
profimedica

So habe ich Text auf eine Leinwand gedruckt. Die Eingabe kommt nicht von einer textarea, sondern von input, und ich teile nur das Leerzeichen. Definitiv nicht perfekt, funktioniert aber für meinen Fall. Es gibt die Zeilen in einem Array zurück:

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

Hier ist der endgültige Code, den ich [OP] verwendet habe. Wahrscheinlich keine Best Practice, aber es hat funktioniert.

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

Zeichenfolge in JavaScript aufteilen

var array = str.match(/[^\r\n]+/g);

OR

var array = str.split(/\r?\n/);
0
TinhNQ

Sie sollten versuchen, die erste Zeile zu erkennen.

Dann ist die:

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

Ich bin mir nicht sicher, aber vielleicht hilft es.

0
Netzach