CodePen

HTML

            
              <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>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .test{
  border:1px solid green;
  margin:20px;
}
.word{
  display: inline-block;
  margin:2px 0;
  border: 1px solid #ccc; 
  background: #eee;
  //text-decoration: underline;
  border-radius: 3px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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


$.fn.wordify = function(){
	textNodes = this.find(":not(iframe,textarea)").addBack().contents().filter(function() {
		return this.nodeType === 3;
	});
  
  /** jquery.wordify.js;
   ** https://gist.github.com/yukulele/8668962
   **/
	textNodes.each(function() {
		var $this = $(this);
		var text = $this.text();
		console.log('in  :'+text);
		text = text.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g,'<span class="word">$1</span>');
		console.log('out :'+text);
		$this.replaceWith(text);
	});
	return this;
};
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................