web-dev-qa-db-ja.com

JavaScriptで文字列を分割し、改行を検出します

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

私が取得しようとしているものを達成することは可能ですか？または、キャンバスにそのままテキスト領域を移動する方法はありますか？

javascriptstringcanvassplitline-breaks
38
Dustin Silk

以下を使用してください。

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

DEMO

今、私がやったことは、改行を使用して文字列firstを分割し、それから以前のように再び分割することでした。注：また、jQueryを正規表現と組み合わせて使用​​することもできます。

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

それがあなたを助けることを願っています！

（注：この質問はすでに一度尋ねられました here ）。

63
Jean-Paul

JSONから文字列を分割する必要がある場合は、文字列の\ n特殊文字が\\ nに置き換えられます。

改行で文字列を分割：

Result.split('\n');

JSONで受信した分割文字列。JSON.stringify（javascriptの場合）またはjson.json_encode（PHPの場合）で特殊文字\ nが\\ nに置き換えられました。 ）。そのため、AJAX応答に文字列がある場合、それは輸送のために処理されました。デコードされていない場合は、\ nが\\ n **に置き換わっているため、次を使用する必要があります。

Result.split('\\n');

ブラウザーのデバッガーツールが期待どおりにこの側面を表示しない可能性があることに注意してください。ただし、\\ nで分割すると、必要に応じて2つのエントリが表示されることがわかります。 enter image description here

4
profimedica

JavaScriptで文字列を分割する

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

OR

var array = str.split(/\r?\n/);
2
Tính Ngô Quang

これは、テキストをキャンバスに印刷するために使用したものです。入力は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;
    }
1
martin

これが最終コードI [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);
  }
0
jacksondc

最初の行を検出してみてください。

そうして：

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

よくわかりませんが、おそらく役立つでしょう。

0
Netzach