ホームページ制作 オフィスオバタ

Javascriptで文字列の一部を抽出する

プログラムを組んでいれば、「文字列操作」は普通にあります。
例えば記事概要表示で、100文字だけ表示するなどです。

PHPであれば、substr()など文字列を操作する関数が豊富にあります。
ただ今回、Javascriptで文字列を操作する必要がありました。

Javascriptでそんなことできるの?
と疑問でしたが、ググって調べて対処できました。

忘備録として記録いたします。

今回やりたいこと

そもそもなんでJavascriptで文字列操作が必要なのか?
PHPで代用できないのか?

という疑問があると思います。

私も最初はPHPで何とかできないかと考えました。
でもPHPでできないことはないかもしれないけれど、Javascriptでやったほうがかなりスマートであることがわかりました。

それが日付表示処理です。

どういうことかというと、Instagramの投稿内容をAPIでホームページに表示する作業をしていた時のエピソードです。

Instagram APIを使用して、写真や記事、投稿日付を取得することができます。
ただ、取得した日付のフォーマットに癖がありました。

取り出した癖のある日付をそのままDate()オブジェクトに流して日付を取得しようとしたところ、一部のブラウザでエラーになりました。

Javascriptだから、ブラウザによって動く・動かないが発生したのです。

ただエラーになっ他ブラウザでも、APIから取り出した日付のうち、頭から10桁だけをDate()オブジェクトに渡すようにしたところ、エラーにならなくなりました。

つまり、余分な文字列をカットすれば大丈夫ということがわかりました。

そのため、Javascriptで文字列操作が必要になったのです。

ズバリJavascriptでもsubstr()関数を使えます

まずは論より証拠。
こちらのサンプルでJavascriptで文字列をカットを実現しています。

ラジオボタンを選択すると、指定の文字数で文字がカットされます。
これは、substr()関数で実現しています。

PHPにもあるsubstr()関数と同等の動作をします。

ソースはこちら


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>javascriptでsubstrを使う</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	get_text();

	$("input[name=cnt]").change(function()
	{
		get_text();
	});

	$("input[name=moji]").on("input", function()
	{
		get_text();
	});


	function get_text()
	{
		var cnt = $("input[name=cnt]:checked").val();
		var text = $("input[name=moji]").val().substr(0, cnt);
		$("#disp").text(text);
	}


});
</script>

<style type="text/css">
.box 
{
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	margin-top: 20px;
	border: 1px solid #ccc;
}
input
{
	padding: 4px;
	margin-bottom: 10px;
}
#disp
{
	padding: 10px;
	border: 3px solid #F00;
}

</style>
</head>

<body>
<div class="box">
<p>文字を切り取って表示します</p>
<input name="moji" type="text" style="width: 90%" value="abcdefghijklmnopqrstuvwxyz"><br>
<input name="cnt" type="radio" value="10" checked>10文字表示
<input name="cnt" type="radio" value="20">20文字表示
<input name="cnt" type="radio" value="30">30文字表示

<div id="disp"></div>
</div>
</body>
</html>

substrの解説

長々書くとわかりにくいですが、実際にsubstr()をコールしているのは1か所です。


var text = $("input[name=moji]").val().substr(0, cnt);

テキストフォームに入力された文字列を、頭から指定文字数で取り出しています。
Javascriptでのサブルーチンコール方法はドット「.」でつないでコールするので、PHPの感覚だと違和感を感じますが、それを除けばまんまPHPと同じです。

substr(引数①, 引数②);

引数① 抽出開始位置

抽出する文字列の開始位置。
0を入れると、文字列の先頭からという意味になります。
ちなみに、-1を入れると文字列の一番後ろという意味になります。

引数② 抽出する文字数

何文字抽出するかを指定します。
ちなみにPHP版では、文字数をマイナス指定してもそれなりに動作しましたが、Javascript版では動作しませんでした。

意外といろんな関数のあるJavascript

Javascriptって、HTMLに動的な動きを付け足すイメージがありましたが、意外とPHPのような操作系の処理もできることがわかりました。

無論、PHP側で対処できるならばそのほうが良いです。
ただ、PHP側の対処がむつかしい場合はJavascript側で対処しなくてはいけません。
どちらでも対応できるようにしておくことが、何かと役に立つという経験をしました。

また本記事がお役に立てば幸いです。

モバイルバージョンを終了