以前、こちらの記事にてJSを用いた文章の取り出し方を解説しました。
今回はその続きです。
今回のゴール：文章内条件と一致した文字があるか見る
以前、取り出したい位置の文章は取り出せましたね。
今回、文章は前回と同じく、こちらを用います。
HTML
<!DOCTYPE html>
<head>
<title>
練習用
</title>
</head>
<body>
<h1 id="h1_id" class="h1_class">
あばたけたぶら
</h1>
<main id="main_content" class="id_class">
彼は背後にひそかな足音を聞いた。<br>
それはあまり良い意味を示すものではない。<br>
誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。<br>
人生の航路を捻じ曲げ、その獲物と共に立ち去ろうとしている、その丁度今。<br>
彼のこの仕事への恐れを和らげるために、数多い仲間の中に同じ考えを抱き、<br>
彼を見守り、待っている者がいるというのか。<br>
それとも背後の足音の主は、この街に無数にいる法監視役で、強靭な罰をすぐにも彼の手首にガシャンと下すというのか。<br>
彼は足音が止まったことに気が着いた。<br>
あわてて辺りを見回す。ふと狭い抜け道に目が止まる。<br>
彼は素早く右に身を翻し、建物の間に消え去った。<br>
その時彼は、もう少しで道の真中に転がっていたごみバケツに躓き転ぶところだった。<br>
彼は暗闇の中で道を確かめようとじっと見つめた。<br>
どうやら自分の通ってきた道以外にこの中庭からの出道はないようだ。<br>
足音はだんだん近づき、彼には角を曲がる黒い人影が見えた。<br>
彼の目は夜の闇の中を必死にさまよい、逃げ道を探す。<br>
もうすべては終わりなのか。すべての苦労と準備は水の泡だというのか。<br>
突然、彼の横で扉が風に揺らぎ、ほんのわずかにきしむのを聞いた時、彼は背中を壁に押し付け、追跡者に見付けられないことを願った。<br>
この扉は望みの綱として投げかけられた、彼のジレンマからの出口なのだろうか。<br>
背中を壁にぴったり押し付けたまま、ゆっくりと彼は開いている扉の方へと身を動かして行った。<br>
この扉は彼の救いとなるのだろうか。
</main>
<script src="test.js"></script>
</body>
mainにクラス、IDを付けました。そこだけお気を付けください。
（なんかしっかりしてる人から見たら怒られそうなID名とかつけてそうです...ゴメンナサイ）
こちらの文章から、それでは「すべての」という単語がいくつあるのか調べてみましょう。
方法：matchを用いる
簡単に、matchを用いれば対象の文字列を検索することができます。
以下、test.jsに記載する内容です。
JS
/*対象の文字列の取り出し*/
var main_content = document.getElementsByTagName('main')[0].textContent;
console.log(main_content);
/*match関数を用いて対象の文字が何個あるか調べる*/
const subject_num = main_content.match("すべての");
console.log(subject_num.length);
varを使うのはよろしくないと聞いたので、途中constを用いています。
実行すると1と帰ってきます。
本当に1下記になる方は
- 対象のページ
- 右クリックから検証をクリック
- ページで「コントロール+F」
- 検索窓に「すべての」と打つ
そうすると文字が何個あるか数えられます。（今回だと1です）
しかしこれでは事前に文字列が分かっていなければなりませんね。
どうせなら変数をmatchに渡してみたいものです。
方法：RegExpを用いる
まず、下記コードのようになります。
JS
/*対象の文字列の取り出し*/
var main_content = document.getElementsByTagName('main')[0].textContent;
const search = "すべて";
console.log(main_content);
/*match関数を用いて対象の文字が何個あるか調べる*/
const subject_num = main_content.match(new RegExp(search, "g"));
console.log(subject_num.length);
変数で検索する際は「RegExp」を用いるそうです。
（試しに変数をそのままmatchの因数に渡したのですが実行できます、まだ正規表現を使っていないからですかね？）
このように行うことで、変数も検索できるようになりますね。
次回
次は実際に正規表現を用いて文字を表してみましょう！