この記事ではJSと正規化を用いて文章の一部を書き換えていきます。
今回のゴール：JSを用いて文章の一部分を取り出す
今回、業務の中で「正規化を使って文章の一部分を変更する」
という作業を行っているコードを見かけ、
「そろそろ正規化を使えるようになりたい」という思いから
まとめつつ勉強することにしました。
そこで、まずはJSをつかって自分の取ってきたい箇所を含む、全体の要素を取得してみましょう。
生JSの方法:document.getElementを用いる
こちらに関しては複数方法が考えられますね。
HTML
<!DOCTYPE html>
<head>
<title>
練習用
</title>
</head>
<body>
<h1 id="h1_id" class="h1_class">
あばたけたぶら
</h1>
<main>
彼は背後にひそかな足音を聞いた。<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>
かなり長い文章ですね。どういう物かはあまり理解していないのですが...
実際に動かす前に、test.jsの中身をお見せしましょう。
test.js
var h1_content = document.getElementById('h1_id').textContent;
console.log(h1_content);
今回はh1の要素を取得しようとしています。
取得する際、document.getElementByIdで取得しようとしていますが
test.js
var h1_content_ID = document.getElementById('h1_id').textContent;
var h1_content_class = document.getElementsByClassName('h1_class')[0].textContent;
var h1_content_tug = document.getElementsByTagName('h1')[0].textContent;
console.log(h1_content_ID);
console.log(h1_content_class);
console.log(h1_content_tug);
上記様々な方法で可能です。
ただし、注意も必要です。
Idで指定すれば一意に定まります（帰り値は一つ）が、
クラスメイとタグ名はリストで帰ってきてしまいます。
ここを間違えるとundefinedとなってしまい、表示されません。
このようにJSでは様々な取得方法が与えられています。
是非一度ご自身で試してみてください！
次回は「与えられた文字列の中で該当する箇所が存在するか」どうかを
チェックしてみましょう！