- Published on
Javascriptでウェブページの全ての文字を置換する
1745文字3分で読めます–––
閲覧数
- Authors
- Name
- Shou Arisaka nyapp.buzz/shou
- short bio
- Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
Javascriptでウェブページの全ての文字を置換するサンプルコードのメモです。
使用例：自分のコーディング／作成したウェブページのデザインやレイアウトを友達とかクライアントに見てもらいたいけど、文字がそのまま書いてあるとサイト特定されてしまう。それを避けたいみたいな場合。
やり方：以下のJavascriptをファイルなりブックマークレットなりデベロッパーツールコンソールなりで読み込ませます。
var all = document.getElementsByTagName('p');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('a');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('span');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('li');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h1');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h2');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h3');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h4');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h5');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
var all = document.getElementsByTagName('h6');
for (var i = 0; i < all.length; i++) {
all[i].innerText = all[i].innerText.replace(/./g, "あ");
}
やってること：テキストが書いてありそうなタグすべてのすべてのStringのCharacterを一文字ずつ置換しています。
- p
- a
- span
- h1-h6
ここらのタグをマークしとけば、とりあえずokだと思う。
bodyタグのinnerTextを置換すればいいんじゃないかと思われるかもしれませんが、そうするとCSSとかも消えちゃうみたいで、レイアウト崩れます。
document.body.innerText = document.body.innerText.replace(/./g, 'あ');
15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。
何かご質問がありますか？
