<!-- ▼jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>

<!-- ▼今回のスクリプト本体 -->
<script type="text/javascript">
   $(".colorful").children().addBack().contents().each(function(){
      if (this.nodeType == 3) {
         var $this = $(this);
         $this.replaceWith($this.text().replace(/(\S)/g, "<span>$&</span>"));
      }
   });
</script>
// background-color特性を yellow に変更する関数。
function show(ev) { // evには発生したイベント情報オブジェクトが代入される
  var element = (ev.target||ev.srcElement);
  element.style.backgroundColor = "orange";
}
// すべての <span class="check">...</span> にイベントリスナ
// として show() 関数を登録する
function addAll() {
  var i, item;
  var checks = document.getElementsByTagName("span"); //すべてのspan
  for (i=0; i<checks.length; i++) {
    item = checks[i];			//i番目のspanを得る
    if (item.getAttribute("class") == "check") {
      item.addEventListener("click", show, false);	//show()関数を呼ぶ
    }
  }
}
//HTML文書ロード完了時に addAll() 関数が呼ばれるようにする。
window.onload = addAll;