Web技術系中心に割と何でも更新中

任意の文字列中から指定した文字の前後の文字列を切り取る方法【JavaScript・jQuery】

Programming Web

Web制作者

Web制作者
「任意の文字列の前後を切り抜く方法が知りたい」

こういった要望にお応えします。

本記事の内容

  • JavaScript(jQuery)を使用した任意の文字列中から指定した文字の前後の文字列を切り抜く方法

こんにちは、mineです。
Web制作歴は7年になります。

僕が過去にWeb制作をしている中で、ある文字列中から文字を指定してその前後の文字列を切り抜きたいという場面がありました。
例えば、下記のようなケースです。

(例)「野球:baseball」という文字列の場合

  • 英字(baseball)のみ切り抜きたい場合、:(コロン)よりも後の文字列を切り抜きます
  • 日本語(野球)のみ切り抜きたい場合、:(コロン)よりも前の文字列を切り抜きます

このようなケースを実際にJavaScript(jQuery)を使って実現してみます。

<head>内に記述

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
前提としてjQueryを<head>内に記述します。

ここから具体的な方法を紹介します。

任意の文字列中から指定した文字よりも後の文字列を切り抜く方法

イメージ

文字列切り抜き(後)

任意の文字列に含まれる指定文字列の後を切り出して表示します。

上のイメージでは、「baseball:野球」という文字列から、「:(コロン)」の後ろの文字列を切り抜いて表示しています。

HTML

<p>切り抜き元文字列<input type="text" id="base_str" /></p>
<p>基準文字列<input type="text" id="cut_str" /></p>
<div id="front_txt"></div>

設置する要素

  • 切り抜き元文字列の入力欄<input>
  • 基準となる文字列の入力欄<input>
  • 切り抜き後文字列を表示するための<div>

HTMLは非常にシンプルです。

JavaSctip(jQuery)

$(document).on('input keyup blur', 'input[type="text"]', function() {
	$('#front_txt').text("");
	var base_str = $('#base_str').val();
	var cut_str = $('#cut_str').val();
	var front_str = base_str.slice(base_str.indexOf(cut_str) + 1);
	if(cut_str && front_str){
		$('#front_txt').text(front_str);
	}
});
基本的に.on()メソッドで、入力欄に文字を入力した場合に、切り抜きの処理を行うようにしています。

.val()メソッドで、切り抜き元文字列をbase_strに格納します。
基準となる文字列をcut_strに格納します。

base_str.indexOf(cut_str) + 1が、基準となる文字列の一つ後ろの位置を示しており、その位置を基準に.slice()メソッドで切り抜いて、front_strに格納しています。

最後に.text()メソッドで、front_strを表示させます。

任意の文字列中から指定した文字よりも前の文字列を切り抜く方法

イメージ

文字列切り抜き(前)

任意の文字列に含まれる指定文字列の前を切り出して表示します。

上のイメージでは、「baseball:野球」という文字列から、「:(コロン)」の前の文字列を切り抜いて表示しています。

HTML

<p>切り取り元文字列<input type="text" id="base_str" /></p>
<p>基準文字列<input type="text" id="cut_str" /></p>
<div id="back_txt"></div>

HTMLは先述した「後の文字列を切り抜く方法」とほぼ同様です。

JavaSctip(jQuery)

$(document).on('input keyup blur', 'input[type="text"]', function() {
	$('#back_txt').text("");
	var base_str = $('#base_str').val();
	var cut_str = $('#cut_str').val();
	var back_str = base_str.substring(0, base_str.indexOf(cut_str));
	if(cut_str && back_str){
		$('#back_txt').text(back_str);
	}
});
上記の「後の文字列を切り抜く方法」と同様に、.on()メソッドで、入力欄に文字を入力した場合に、切り抜きの処理を行うようにしています。

.val()メソッドで、切り抜き元文字列をbase_strに格納します。
基準となる文字列をcut_strに格納します。

base_str.indexOf(cut_str)が切り出しの終了位置(基準文字列の位置)を示しており、.substring()メソッドで、切り取り元文字列の先頭から、基準文字列の位置までを切り取ります。

最後に.text()メソッドで、back_strを表示させます。

まとめ

順を追ってコードを見ていけば、分かりやすい構造になっています。
様々なjQueryメソッドが使われているので、勉強にもなりそうです。

ポイント

  • .indexOf()メソッドで指定文字列の位置を取得する
  • 指定文字列より後を切り出す場合は.slice()メソッドを使用
  • 指定文字列より前を切り出す場合は.substring()メソッドを使用
「1.野球、2.サッカー、3.テニス・・・」のようなテキスト表記でセレクトボックスがあるとして、項目を選択した時にセレクトボックスとは別に、頭についている数字とドットを除外した状態でテキスト表示するケースで使用しました(分かりづらいですね)。

使う場面があればぜひお試しください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果