Question

Given an HTML string like this one:

Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a>
elit, <strong>tincidunt</strong> ut volutpat.

How do I surround all the words with <span> elements, so it becomes:

<span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span>
<span>amet,</span> <a href="#"><span>consectetuer</span> <span>adipiscing</span></a>
<span>elit,</span> <strong><span>tincidunt</span></strong> <span>ut</span>
<span>volutpat.</span>

Answer 1

A simpler approach

preg_replace('([a-zA-Z.,!?0-9]+(?![^<]*>))', '<span>$0</span>', '{{your data}}');

It surrounds with <span> all words from your vocabulary [a-zA-Z.,!?0-9]+ except words in <brackets>.
Now it seems to be easy to change your vocabulary if needed, e.g. if you don’t want single punctuation to became surrounded, etc.