![見出し画像](https://assets.st-note.com/production/uploads/images/94881177/rectangle_large_type_2_687f1ec43f19e83e42b201f99f2ceba0.png?width=1200)
Photo by
brandkojo
ブラウザのヘッドレスモードを使って、javascript の実行結果を取得してみる
もしかしたらもっと簡単な方法があるのかもしれませんが、せっかく作ってみたのでメモっときます。同じ階層のディレクトリに
● run.sh
● index.html
● main.js
の3つのファイルを作ったら、
./run.sh
と実行するだけです。
run.sh
#!/bin/bash
# google-chrome の場所
CHROME="/opt/google/chrome/chrome"
# ブラウザで javascript 実行後の dom を取得
RAW=$("$CHROME" --headless --dump-dom index.html 2>/dev/null)
# 不要な部分を除去
ESCAPED=$(echo "$RAW" |
grep -Poz '(?<=<div id="out">)[\s\S]*(?=</div>)' |
sed 's/\x0$//')
# エスケープされた & < > を元に戻す
echo -n "$ESCAPED" |
sed 's/</</g; s/>/>/g; s/&/\&/g'
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="out"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
function out(s) {
document.getElementById('out').textContent = s;
}
function main() {
let s = '';
let j = 0;
for (let i = 0x20; i <= 0x7e; i++) {
s += String.fromCharCode(i);
if (++j == 0x10) {
s += '\n';
j = 0;
}
}
s += '\n';
j = 0;
for (let i = 0x3041; i <= 0x3094; i++) {
s += String.fromCharCode(i);
if (++j == 0x10) {
s += '\n';
j = 0;
}
}
return s;
}
let result = main();
out(result);
実行結果
$ ./run.sh
!"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~
ぁあぃいぅうぇえぉおかがきぎくぐ
けげこごさざしじすずせぜそぞただ
ちぢっつづてでとどなにぬねのはば
ぱひびぴふぶぷへべぺほぼぽまみむ
めもゃやゅゆょよらりるれろゎわゐ
ゑをんゔ
おしまい。
2023.1.6 追記
gist のリンク埋め込みがまったく表示されないことがありましたので、note標準のコード表記にしました。
最後まで読んでいただきまして、ありがとうございました!