noromanba/zalgolf-js.md

## zalgolf-js.md

      
    Raw
  

              zalgolf-js.md
            
          
    Zalgolf / Re:Zalgo

js Zalgo Scrambled Text + slightly code-golf
original code and description by @aTakaakiSeki

Z̩̮̜͉̣͎͉̤͇͂̇͊̇̅̚ͅa̠͌̔l̨̢̞̘͉̟̰̱̭̜͍̙̣̬̂̿̌̐̾̾͂̍̽̓̓̇̄g̨̢̡̢̛͍̪̠̠̹̜̪̘̱͌̆̒̅̐ỏ̡̱̞̣̖̦̰̙͊́̋́̃̂̓̍̃ - 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]