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

2023年3月29日

プログラムを組んでいれば、「文字列操作」は普通にあります。
例えば記事概要表示で、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><metacharset="shift_jis"><title></title><scriptsrc="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();
	});


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


});
</script><styletype="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><divclass="box"><p></p><inputname="moji"type="text"style="width: 90%"value="abcdefghijklmnopqrstuvwxyz"><br><inputname="cnt"type="radio"value="10"checked>10文字表示
<inputname="cnt"type="radio"value="20">20文字表示
<inputname="cnt"type="radio"value="30">30文字表示

<divid="disp"></div></div></body></html>Code language:HTML, XML(xml)

substrの解説

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

var text = $("input[name=moji]").val().substr(0, cnt);
Code language:JavaScript(javascript)

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

substr(引数①, 引数②);

引数①　抽出開始位置

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

引数②　抽出する文字数

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

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

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

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

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

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,JqueryJavascript,substrを呼ぶ,文字を抽出

Posted by OBATA