ywork2020.com

Title

文字列から指定した部分だけを取り出す

目次 (INDEX)

substr とは

ここで説明する substr とは次の語句からなる JavaScript のメソッドです。
substring
読み: サブストリング
意味: 部分列 (文字部分列、配列部分列)

目次に戻る

substr メソッドの概要

このメソッドは、引数に与えた開始値と長さで、呼び出し元の文字列の部分列を返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var strNewString = String.substr(intStart [, intLength]);
  • intStart: 取り出す (切り出す) 部分列の開始位置をインデックス値で指定します。負の数値を与えた場合、最後の文字から数えて何番目かを指定したことになります。
  • intLength: 開始位置から何文字分を切り出すかを数値で指定します。これはオプションなので必須ではありません。

目次に戻る

サンプルコードと実行結果

ここでは、substr() の第一引数に 正の数と負の数を与えた場合、の結果を見てみます。 またオプションとなる第二引数も与えて結果をみてみましょう。

サンプルコード: HTML
<body>
	<div id="idOriginal"> user-ywork2020 </div>
	 ↓
	<div><output id="idOutput1"> innerText </output></div>
	<div><output id="idOutput2"> innerText </output></div>
	<script>...</script>
</body>
  • 02: div id="idOriginal (この要素のテキストをオリジナルの文字列とします。)
  • 04: output id="idOutput1" (ここに substr(5, 7) の実行結果を出力します。)
  • 05: output id="idOutput2" (ここに substr(-5, 3) の実行結果を出力します。)
サンプルコード: script
<script>
	let elmOriginal = document.getElementById("idOriginal");
	let elmOutput1 = document.getElementById("idOutput1");
	let elmOutput2 = document.getElementById("idOutput2");
	elmOutput1.innerText = elmOriginal.innerText.substr(5, 7);
	elmOutput2.innerText = elmOriginal.innerText.substr(-5, 3);
</script>
  • 05: substr(5, 7) (切り出しのスタートは インデックス 5 なので 6 文字目となります。)
  • 06: substr(-5, 3) (切り出しのスタートは -5 なので 最後から数えて 5 文字目となります。)
実行結果:
user-ywork2020
substr(5, 7) innerText

substr(-5, 3) innerText

目次に戻る