[解決済み] 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
お役に立てれば幸いです。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] C#のStringとstringの違いは何ですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] Bashで文字列をデリミターで分割するには?
-
[解決済み] JavaScriptでランダムな文字列/文字を生成する
-
[解決済み] JavaScriptで変数が文字列かどうかをチェックする
-
[解決済み] Javaで文字列を分割する方法
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?