JavaScriptで指定した文字の前後の文字列を切り出す方法(slice、substring、indexOfメソッド)

当記事では、JavaScriptを使用して、指定した文字の前後の文字列を切り出す方法を紹介します。

「このテキストのこっから後ろいらないな~」みたいなときに使えます。

例えば下記のようなイメージです。

(例1)http://sampleurl.com?page=1
?よりも前の文字列⇒http://sampleurl.com(URLのパラメータ部分を消したい)

(例2)3.JavaScript
.(ドット)より後の文字列⇒JavaScript(リスト番号部分を消したい)

考え方

考え方はシンプルで、任意の文字列から指定した文字がある位置を求めて、その位置から前全文字列、後ろの全文字列を切り出します。

具体的には、下記のとおりです。

  • 1.indexOfメソッドで指定した文字列の位置を求めます。
  • 2.JavaScriptのsliceメソッドもしくはsubstringメソッドを使用して、1.で取得した位置を指定して文字列を切り出します。

【サンプル】
下記のサンプルDEMO1、DEMO2をクリックして、リンク先で動作確認できます。

切り出す元となる文字列と、切り出す基準となる文字列を入力して実行ボタンをクリックします。

  • DEMO1:切り出す基準となる文字列から後の文字がテキストで表示
  • DEMO2:切り出す基準となる文字列から前の文字がテキストで表示

指定した文字列より後の文字列を取得

DEMO1の、指定した文字列より後の文字列切り出しの処理をHTMLとJavaScriptで実装します。

HTMLでコーディング

HTMLで文字列を入力する欄×2、切り出し実行ボタン、切り出し後のテキスト表示要素を用意します。

<form id="cutout">
    <div class="cutout_area">
        <p>切り出し元文字列<input type="text" id="cutout_before1"></p>
        <p>基準となる文字列<input type="text" id="cutout_before2"></p>
        <button id="cutout_btn" type="button">実行</button>
        <div id="cutout_before_text"></div>
    </div>
</form>

実行ボタン(buttonタグ)には、onclickでbefore_cut()関数が動作するように設定しておきます。

JavaSctipで実装

$(function(){
	$('button[id="cutout_btn"]').click(function(){
		before_cut();
	});
});

function before_cut() {
	// 1.切り出す元となるテキスト取得
	var str     = document.getElementById('cutout_before1').value;
	// 2.切り出す基準となるテキスト取得
	var cut_str = document.getElementById('cutout_before2').value;
	// 3.基準となる文字列の位置を取得
	var index   = str.indexOf(cut_str);
	// 4.基準文字列から後の文字列を切り出して表示
	str         = str.slice(index + 1);
	document.getElementById('cutout_before_text').innerHTML = str;
}

1.切り出す元となるテキスト取得
入力した切り出す元となる文字列をdocument.getElementByIdメソッドで取得します。(inputタグに入力したテキストを取得するので、.value()を使用します。)

2.切り出す基準となるテキスト取得
1と同様に、切り出す基準となるテキストを取得します。

3.基準となる文字列の位置を取得
indexOfメソッドで、2で取得した基準となる文字列が、切り出し元の文字列のどの位置にあるのか(index番号)を取得します。

4.基準文字列から後の文字列を切り出して表示
slice()メソッドで基準文字から一つ次のindex番号のみを指定(index+1)して、基準文字から後ろの文字列を取得します。
切り出した文字列をdocument.getElementByIdメソッドのinnerHTMLプロパティで画面に表示させます。

指定した文字列より前の文字列を取得

HTMLで文字列を入力する欄×2、切り出し実行ボタン、切り出し後のテキスト表示要素を用意します。

<form id="cutout">
    <div class="cutout_area">
        <p>指定文字列から前を切り出す</p>
        <p>切り出し元文字列<input type="text" id="cutout_after1"></p>
        <p>基準となる文字列<input type="text" id="cutout_after2"></p>
        <button id="cutout_btn2" type="button">実行</button>
        <div id="cutout_after_text"></div>
    </div>
</form>

実行ボタン(buttonタグ)には、onclickでafter_cut()関数が動作するように設定しておきます。

JavaSctipで実装

function after_cut() {
    // 1.切り出す元となるテキスト取得
    var str     = document.getElementById('cutout_after1').value;
    // 2.切り出す基準となるテキスト取得
    var cut_str = document.getElementById('cutout_after2').value;
    // 3.基準となる文字列の位置を取得
    var index   = str.indexOf(cut_str);
    // 4.基準文字列から前の文字列を切り出して表示
    str         = str.substring(0, index);
    document.getElementById('cutout_after_text').innerHTML = str;
}

1.切り出す元となるテキスト取得
入力した切り出す元となる文字列をdocument.getElementByIdメソッドで取得します。

2.切り出す基準となるテキスト取得
1と同様に、切り出す基準となるテキストを取得します。

3.基準となる文字列の位置を取得
indexOfメソッドで、2で取得した基準となる文字列が、切り出し元の文字列のどの位置にあるのか(index番号)を取得します。

4.基準文字列から前の文字列を切り出して表示
substring()メソッドで、切り出し元文字列の先頭(0)から切り出し基準文字列の位置(index)を指定して、基準文字列から前の文字列を取得します。
切り出した文字列をdocument.getElementByIdメソッドのinnerHTMLプロパティで画面に表示させます。

【注意点】
indexOfメソッドで指定した文字列が複数存在する場合は最初にでてきたものの位置を返します。

まとめ

jQueryなどのプラグインを使わずにJavaScriptだけで実装できるのがいいですね。
やってみると何てことはない処理ですが覚えておくと便利です。

CONTACTお問い合わせ

まずはお気軽にご相談ください

お問い合わせ