More than 3 years have passed since last update.

［Shortcuts]DataURLを使ってJSを実行する

Shortcuts

Last updated at 2021-01-10Posted at 2021-01-10

HTMLのscriptタグに処理を書く
HTMLを[URLエンコード]でエンコードする
data:text/html,(ここにエンコードしたHTML)の形式でDataURLを作る
出力させたい値をdocument.write()などでBodyタグに書き出す
[Webページの内容を取得]の入力に渡す
[テキストを取得]

実践

とりあえず[辞書]アクションをJSON.stringify()で整形してみる。

ショートカット側

辞書アクションの中身

{
  "fizz": "bizz",
  "bool": false,
  "apple": {
    "hiragana": "りんご",
    "chineseChar": "林檎"
  },
  "array": [
    "hoge",
    "fuga",
    "puyo"
  ]
}

テキストアクション内のHTML

<!DOCTYPE HTML>
<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>pretty-json</title>
	<script>
		const json = [辞書];  // [辞書]アクションに置き換える
		const pretty = JSON.stringify(json, null, "&emsp;").replace(/\n/g, "<BR>");
		document.write(pretty)
	</script>
  </head>
</html>

ちょっとミソ

HTMLで使うJSON.stringify()

// これだと整形されて表示されない(HTMLはスペースや改行は反映されないため)
const bad = JSON.stringify(json, null, "\t");

// スペースや改行をHTML用に置き換える
const good = JSON.stringify(json, null, "&emsp;").replace(/\n/g, "<BR>");

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up