1. ホーム
  2. javascript

[解決済み] JavaScriptで文字列を分割し、改行を検出する

2023-08-06 09:29:33

質問

からの文字列を受け取る小さな関数があります。 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);
}

私が得ようとしていることを実現することは可能なのでしょうか?それとも、単純にテキストエリアをそのままキャンバスに移動させる方法があるのでしょうか?

どのように解決するのですか?

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

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

デモ

さて、私が行ったのは、文字列を分割して まず というように改行して分割し、それからまたさっきと同じように分割しています。注:jQueryと正規表現を組み合わせて使用することもできます。

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

お役に立てれば幸いです。