この記事は、Calendar for 東京電機大学 | Advent Calendar 2022 - Qiita の8日目です。
昨日は、 埼玉をダ埼玉に変えてしまうブックマークレットを作成しました。そして、今回は、私が生まれ育った「茨城県」を使って遊んでいこうかと思います。
魅力度ランキングを一番見ている茨城県民
魅力度ランキングというものがあります。ブランド総合研究所というところが毎年調査を行って都道府県を魅力度別にランキング化します。これを思いついた人はやばいですね。
茨城県は結構長い間最下位に君臨していました。しかし、今年!2022年は惜しくも最下位を逃してしまいました!!!
「魅力度最下位」というアイデンティティを奪い取られた茨城県はもはやなにもない県です*1。中途半端な順位なら最下位が良かったと全茨城県民は思っているはずです。
この記事では、そのような喪失感にあふれている茨城県を救うべく、Webページの「茨城県」を「魅力度最下位県」に変換するスクリプトとブックマークレットを作成していきます!!
前日のダ埼玉より詳しく書いていこうかと思います!
作成
HTML全体を取得する
JavaScriptでは、HTMLのBody要素全体をString型で取得する場合、document.body.innerHTML
を使用します。また、新しく上書きする際にはこれを上書きすることが可能です。
文字列
JavaScriptの文字列置き換えはString.prototype.replace()
を使用します。このreplace
メソッドは結構便利で正規表現を使用して置き換える文字列を指定することができます。
正規表現
今回、茨城県
以外にも茨城
、いばらき
、いばらきけん
、いばらぎ
なども変換対象にします。
そうすると、正規表現で表すと以下のようになります。
(茨城|いばらき|いばらぎ)(県|けん)?
チェッカーで確認すると正しいことがわかります。
実装する
function ibaraki() { const b = document.body; d.innerHTML = d.innerHTML.replace(/(茨城|いばらき|いばらぎ)(県|けん)?/g, '魅力度最下位$2'); }
簡単に試せるようにボタンも作りました!↓
テスト用 茨城県 いばらき 茨城 いばらきけん いばらぎ
ブックマークレット
ブックマークレットはjavascript:()
とすることでできます。これをすることでブックマークに埋め込むことができ、ブックマークボタンを押すことで簡単に「茨城県」を「魅力度最下位県」にすることができます。
javascript:((()=>{const b=document.body;b.innerHTML=b.innerHTML.replace(/(茨城|いばらき|いばらぎ)(県|けん)?/g, '魅力度最下位$2');})())
おまけ
いばらぎをいばらきに変換するスクリプトも作りました。ボタンを設置しているので遊んでみてください。
テスト用 茨城県(いばらぎけん)は、関東地方にある県です。茨城の読みは「いばらぎ」と読みます。
*1:過言です。