プログラムを組んでいれば、「文字列操作」は普通にあります。
例えば記事概要表示で、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側で対処しなくてはいけません。
どちらでも対応できるようにしておくことが、何かと役に立つという経験をしました。
また本記事がお役に立てば幸いです。