Разделить строку в JavaScript и обнаружить разрыв строки

У меня есть небольшая функция, которую я нашел, которая берет строку из textarea, а затем помещает ее в элемент canvas и обертывает текст, когда линия становится слишком длинной. Но он не обнаруживает разрывов строк. Это то, что он делает и что ему следует делать:

Input:

Hello

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

Неверный вывод:

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

Что он должен выводить:

Hello

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

Это функция, которую я использую:

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

Можно ли достичь того, что я пытаюсь получить? Или есть способ просто перемещать текстовую область как в холст?

Ответы

Ответ 1

Используйте следующее:

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

DEMO

Теперь то, что я сделал, это сначала разбить строку, используя разрывы строк, а затем разбить ее так же, как раньше. Примечание: вы также можете использовать jQuery в сочетании с регулярным выражением для этого:

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

Надеюсь, что это поможет!

(Примечание: этот вопрос уже задавался после здесь).

Ответ 2

Если вам нужно разбить строку из вашего JSON, строка имеет специальный символ \n, замененный на \\n.

Разделить строку по новой строке:

Result.split('\n');

Сплит-строка, полученная в JSON, где специальный символ \n был заменен на \\n во время JSON.stringify(в javascript) или json.json_encode (в PHP). Итак, если у вас есть строка в ответе AJAX, она обрабатывается для транспортировки. и если он не был декодирован, то он будет заменен \n на\\n **, и вам нужно будет использовать:

Result.split('\\n');

Обратите внимание, что инструменты отладчика из вашего браузера могут не показывать этот аспект, как вы ожидали, но вы можете видеть, что разделение на \\n привело к двум записям, которые мне нужны в моем случае:

Ответ 3

Это то, что я использовал для печати текста на холсте. Вход не идет от textarea, но от input, и я только разделяю пространство. Определенно не идеально, но работает для моего дела. Он возвращает строки в массиве:

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

Ответ 4

Вы должны попытаться определить первую строку.

Тогда:

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

Я не уверен, но, возможно, это помогает.

Ответ 5

Здесь используется последний код я [OP]. Вероятно, это не лучшая практика, но она сработала.

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

Ответ 6

Разделить строку в JavaScript

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

ИЛИ ЖЕ

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