使用javascript正则表达式获取没有html标签的所有单词

Question

i try to use an regex expression to get all words without html tags the goal of this is to tag all words with span tags to be capable to get the word when my mouse is over, but keep html initial tags

for example this code

<p>hello i'm <b>jesus</b></p>

should become

<p><span>hello</span> <span>i'm</span><b><span>jesus<span></b></p>

So, first step for me, is to get all words, without html tags, and then replace it with span

This is my regex in javascript ([^\\r\\n\\t\\f>< /]+(?!>))

But i have some problems with some tags like
Live example here

Finally , when my regex will be ok, i will be ok to replace all words by $(this).html($(this).html().replace(reg, "$1"));

thx for your help Maybe there is an other way to do this ...

Answer 1

Use .split() to split the textContent of the element. Array#forEach to iterate array after .split and appendChild to append Element.

 var ELEMENT = document.getElementsByTagName('p')[0]; var text = ELEMENT.textContent; ELEMENT.innerHTML = ''; text.split(' ').forEach(function(elem) { var span = document.createElement('span'); span.innerHTML = elem; ELEMENT.appendChild(span); }); 

 span { margin-left: 10px; } 

 <p>hello i'm <b>jesus</b> </p> 

Fiddle Demo