<h2>jQuery wordify</h2>
<p><a href="https://gist.github.com/yukulele/8668962">https://gist.github.com/yukulele/8668962</a></p>
<div class="test">
  Lorem ipsum dolor sit amet, consectetur adipisicing.
  <ul>
    <li>Lorem "ipsum" dolor sit amet.</li>
    <li>Similique <span>minus corporis</span> earum consequatur!</li>
    <li>Nam veniam perspiciatis. Reprehenderit vero.</li>
  </ul>
  <textarea>
    Lorem ipsum dolor sit amet
  </textarea>
  <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>. Fuga dicta error<strong> quae nihil itaque repudiandae in dolorum voluptatibus a amet pariatur ipsam distinctio sint obcaecati </strong>accusantium facere possimus impedit nulla!</p>
  <p lang="fr">Aujourd'hui j'ai mangé du kiwi</p>
  <p lang="js">ちゃ姚氯詧と 餥禚ばレ禞 ほ䩎グェぷリェ きちゅま だ脩, せ饥よつ檧 ト榩ゝれチャ</p>
</div>

.test{
  border:1px solid green;
  margin:20px;
}
.word{
  display: inline-block;
  margin:2px 0;
  border: 1px solid #000; 
  background: #444;
  color: #fff;
  //text-decoration: underline;
  border-radius: 3px;
}

$(function(){
  var test = $('.test')
  //test.clone().insertBefore(test);
  test.wordify()
  $('#output').val(test.html())
})


$.fn.wordify = function(){
  /** jquery.wordify.js
   ** https://gist.github.com/yukulele/8668962
   **/
	var textNodes = this.find(":not(iframe,textarea)").addBack().contents().filter(function() {
		return this.nodeType === Node.TEXT_NODE
	});
  
	textNodes.each(function() {
		var text = this.textContent.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g, '<span class="word">$1</span>')
    $(this).replaceWith(text)
	})
	return this
}