synesthesia.js

/**
 * To level up your synesthesia, choose colors, apply on web pages and read
 * some 100 000 words. Purportedly. :)
 * http://www.theatlantic.com/technology/archive/2012/07/can-you-teach-yourself-synesthesia/259519/
 */

var charColorMap = {
  a: 'darkred',
  e: 'green',
  s: 'blue',
  t: 'brown'
};

function replaceTextNode(tnode) {
  var el = tnode.parentElement;
  var span = document.createElement('span');
  span.innerHTML = tnode.nodeValue.replace(
    /[aest]/gi, (c) => '<span style="color: '+ charColorMap[c.toLowerCase()] + '">'+ c +'</span>');
  el.replaceChild(span, tnode);
}

function walkTree(el) {
  for (var i=0, l=el.childNodes; i < l.length; i++) {
    var child = l[i];
    if (child.nodeType === Node.ELEMENT_NODE) {
      walkTree(child);
    } else if (child.nodeType === Node.TEXT_NODE) {
      replaceTextNode(child);
    }
  }
}

walkTree(document.body);