wrap each character in span

HTML

<div id="demo-text">Test</div>

CSS

span{
  border: 1px solid red;
  background: black;
  color: #fff;
  display: inline-block;
  padding: 10px;
}

JavaScript

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " "));