DEMO

Question

我找到一个小函数，它从textarea中获取一个字符串，然后将其放入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.

它应该输出什么：

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

有可能实现我想要的目标吗？或者有没有办法简单地将文本区域移动到画布中？

Answer 1

使用以下内容：

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

DEMO

现在我所做的是使用换行符将字符串首先分割，然后像之前一样再次拆分。注意：您也可以将jQuery与regex结合使用：

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

希望能帮到你！

（注意：here）曾经问过这个问题。

Answer 2

如果您需要从JSON中拆分字符串，则字符串将\ n特殊字符替换为\\ n。

按换行符分割字符串：

Result.split('\n');

在JSON中收到的拆分字符串，其中特殊字符 \ n在JSON.stringify（在javascript中）或json.json_encode（在PHP中）被替换为\\ n 。因此，如果您在AJAX响应中包含了字符串，则会对其进行处理以进行传输。如果它没有被解码，那么它将被\ n替换为\ n n **并且您需要使用：

Result.split('\\n');

请注意，浏览器中的调试工具可能不会像您期望的那样显示此方面，但是您可以看到按\\ n分割导致了2个条目，因为在我的情况下我需要：

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

Answer 4

使用JavaScript分割字符串

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

OR

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

Answer 5

您可以使用split()函数在换行的基础上中断输入。

yourString.split("\n")

Answer 6

您应该尝试检测第一行。

然后是：

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

我不确定，但也许有帮助。

Answer 7

这是我[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);
  }

在JavaScript中拆分字符串并检测换行符

7 个答案:

DEMO