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

2023年3月28日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()関数と同等の動作をします。

ソースはこちら

substrの解説

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

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

substr(引数①, 引数②);

引数①　抽出開始位置

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

引数②　抽出する文字数

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

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

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

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

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