js Zalgo Scrambled Text + slightly code-golf

zalgolf-js.md

Zalgolf / Re:Zalgo

js Zalgo Scrambled Text + slightly code-golf

original code and description by @aTakaakiSeki

• Z̩̮̜͉̣͎͉̤͇͂̇͊̇̅̚ͅa̠͌̔l̨̢̞̘͉̟̰̱̭̜͍̙̣̬̂̿̌̐̾̾͂̍̽̓̓̇̄g̨̢̡̢̛͍̪̠̠̹̜̪̘̱͌̆̒̅̐ỏ̡̱̞̣̖̦̰̙͊́̋́̃̂̓̍̃ - Qiita

[].concat(...[...document.all].map(e => [...e.childNodes])).filter(n => n.nodeType === Node.TEXT_NODE).map(n => n.textContent = n.textContent.replace(/([a-zA-Z])/g, (_, c) => c + [...Array(Math.floor(Math.random()*30))].map(() => String.fromCharCode(0x300 + Math.floor(Math.random()*79))).join('')))

WTFPL

below codes under the same license

Bookmarklet

minified and unminified code, reference, exposuer of Tips and Tricks

• Zalgolf - Hatena::Let

basics

keep the Spaces of original code

• use #text when text-node filtering
• /([a-zA-Z])/g -> /([a-z])/ig
• Math.floor() truncate -> bitwise operator | 0 (or ~~0)
  • ~Math.trunc()

[].concat(...[...document.all].map(e => [...e.childNodes])).filter(n => n.nodeName === '#text').map(n => n.textContent = n.textContent.replace(/([a-z])/ig, (_, c) => c + [...Array(Math.random()*30|0)].map(() => String.fromCharCode(0x300 + (Math.random()*79|0))).join('')))

Devtools / Scratchpad

Chrome/mium, Firefox and et al. you can use $x(); Arrayed XPath

$x('//text()').map(n => n.textContent = n.textContent.replace(/([a-z])/ig, (_, c) => c + [...Array(Math.random()*30|0)].map(() => String.fromCharCode(0x300 + (Math.random()*79|0))).join('')))

keep the layout

• unuseful body contexted scope
  • e.g. <title>
• :not(:empty) is optional

[].concat(...[...document.querySelectorAll(':not(style):not(script):not(:empty)')].map(e => [...e.childNodes])).filter(n => n.nodeName === '#text').map(n => n.textContent = n.textContent.replace(/([a-z])/ig, (_, c) => c + [...Array(Math.random()*30|0)].map(() => String.fromCharCode(0x300 + (Math.random()*79|0))).join('')))

in the near future, you can wrote :not(style,script,:empty) on Selectors Level 4

---

APPENDIX

about Zalgo

NSFW / VDA

• http://knowyourmeme.com/memes/zalgo#scrambled-text

Zalgo Text Generator by Tchouky

• https://eeemo.net/

To invoke the hive-mind representing chaos. Invoking the feeling of chaos. With out order. The Nezperdian hive-mind of chaos. Zalgo. He who Waits Behind The Wall. ZALGO!

tanasinn

Zalgo look like similar to Japanese meme "tanasinn"

• http://tanasinn.org/
• http://tanasinn.info/wiki/Tanasinn
• http://knowyourmeme.com/memes/tanasinn
• http://ja.uncyclopedia.info/wiki/Tanasinn
• http://dic.nicovideo.jp/a/tanasinn

alt [...Array(n)]

pseudo Array#times() idioms

// ES6/ES2015
Array.from(Array(10), (_, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.from(Array(10)).map((_, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.from(Array(10).keys());
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// ES5
Array.apply(null, Array(10)).map(function(_, i) { return i; });
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Array(10).join().split(',').map(function(_, i) { return i; });
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Tips for making it shorter:

• /([a-z])/ig => /([!-~])/g
  • All printable characters except space can be accompanied with combining characters
• 0x300 => 768
• n.nodeName === '#text' => n.nodeType === 3
  • The constant Node.TEXT_NODE is 3

@aTakaakiSeki Great Tricks ⚡! thank you 😋

A lot of golfing is possible, starting with "Math.random()" replaceable with "~~".
If you're fond of JS golfing, please join our slack room http://jsgolf.club (you can sign up on http://register.jsgolf.club)
Cheers!

@xem Thank you for inviting me, but my role is just a translation/casual-golf. Let me think about it.
FYI true golf fork http://let.hatelabo.jp/pacochi/let/hLHXhfCQv54N