https://t.co/Z6tSJbNHvB リンク先をコピペ→ブラウザの適当なブックマークのURLだけリンク先の文字列に変更→好きなページで実行、で動くと思います(動作環境:「鬼滅」「の刃」を含むWebページ)
— 西 (@2outni4) October 25, 2020
JavaScript勉強中なんでどうやってるのか調べたんですが、よくわかりませんでした。
コードシンプルだし恐らく割と初歩的なんだと思います。
JS、なにもわからん。
以下コード
javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()
Dropbox - kimetsu2kmb.txt - Simplify your lifeより
コードバラして1個ずつ把握していきましょう。
なお、あってるかどうかは保証しない。
以下、コードの中で青字・太文字で書かれてる部分がこれから言及するコード、
赤字で書かれるコードは言及済みのコードとなる。
(function(){
document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
①javascript:~
そもそもこれは、
①ブラウザでのブックマークで上記のコードをURL部分にコピペ
②任意のウェブページを見てる歳にコードを貼ったブックマークをクリック
③見ているページにJavaScriptのコードが作動する、という仕組み。
ブックマークレットというらしい。
ブックマークレットの仕組みと使い方 | ライフハッカー[日本版]
(function(){
document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
②function(){中略}
function 関数A (引数){処理}はJSの初歩的な関数。
関数Aは{}内の処理をする関数となる。
関数A();で処理が実行される。
今回の場合、関数名を置いてない無名関数となる。
(function(){
document.body.innerHTML=document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
③(function(){中略})()
上記のfunction(){中略}が(と)()に囲まれていることで、
即時関数と言って定義と同時に処理を行うっぽい
function定数(){}と定数A();を同時に行うってイメージでいいのかな?
【JavaScript】無名関数とは/即時関数とは - Qiita
1回きりしか使わない関数なので、名前をつける必要がない(=無名)ということ。
無名関数は、実は即時関数の一種。
即時関数はプログラムを即時実行できる点がメリット。
今回のように、1行だけのシンプルなプログラミングを処理するときは
無名関数と即時関数が使われるんですね。
あとは{}内の中略、つまり実際に行われる処理なんだけど、
document.body.innerHTML=
document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
と、なんだか同じ表記が繰り返されててよくわからない。
これもバラして確認してみる。
(function(){
document.body.innerHTML=
document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
④.replace(変更前,変更後);
replace関数
( 文字列 ).replace ("文字列の一部" , "置換後の文字列")で、文字列の中の一部を置換できる。
JavaScript replaceメソッドを使ったHTMLの置換
今回のコードでは、「document.body.innerHTML」の中の「鬼滅」が「キルミー」に、
「の刃」が「ベイベーとなる。
/鬼滅/g
変換する「鬼滅」を/と/gで囲む。
gはglobalを意味する。
これがないと、最初の「鬼滅」の文字列を変換したら処理が終了するが、
gがあれば文字列のすべての鬼滅をキルミーに置換する。
(function(){
document.body.innerHTML=
document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
⑤document.body.innerHTML
ここでreplaceによって変換の対象となる文字列は document.bodyの部分。
document
→ブラウザに読み込まれたウェブページ全体
document.body
→その中のbodyタグに含まれているもの(表示されている物すべて)
.innerHTML
要素内の HTML (ここではbodyタグに含まれている者すべて)を取得・設定する。
element.innerHTML - Web API | MDN
documentの中のbodyがinnerHTMLによってHTMLが習得され、その中の鬼滅がreplace関数でキルミーに変換される。
(function(){
document.body.innerHTML=
document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');
})()
⑥document.body.innerHTML=
要素.innerHTML =~で、elementのHTMLを=以降の~に変換できる。
ここでの要素はdocument.bodyなので、
元のdocument.bodyを、
document.bodyの一部文字列をreplaceしたものに置き換える。
これによってウェブページの「鬼滅の刃」が「キルミーベイベー」になる。
めでたしめでたし。
最初のdocument.body.innerHTML=って必要なの?
調べる上で引っかかったところ。
=以後の「document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');」で
文字が置換されているのだから、
「元々のページを」「文字列置換以後に変換する」の
「元々のページを」って部分必要なの?という疑問。
javascript:(function(){document.body.innerHTML.replace(/鬼滅/g, 'キルミー').replace(/の刃/g, 'ベイベー');})()
だけではだけではダメなのかという。
「.replace」が文字列の変換をしただけでブラウザ上の表示には関与せず、実際表示されているdocument.body.innerHTMLにdocument.body.innerHTML.replaceを代入するという認識でいいのだろうか。
「変数 = 辺数 +1」を「変数+1」と書いても作動しないように。
まぁ今はそういうもんだととりあえず覚えておく。