title: Split string into words in javascript
body: <p>At the moment i am working on text that is broken into floating columns to display it in a <code>magazine-like</code> way.</p>
  
  <p>I asked in a <a href="https://stackoverflow.com/questions/18914629/split-string-into-sentences-in-javascript/18914855#18914855">previous question</a> how to <code>split</code> the text into sentences and it works like a charm: </p>
  
  <pre><code>sentences = text.replace(/\.\s+/g,'.|').replace(/\?\s/g,'?|').replace(/\!\s/g,'!|').split("|");
  </code></pre>
  
  <p>Now i want to go a step further and split it into words. But i do also have some elements in it, that should not be splitted. Like subheadlines.</p>
  
  <p>An example text would be: </p>
  
  <pre><code>A wonderful serenity has taken possession of my entire soul. &lt;strong&gt;This is a subheadline&lt;/strong&gt;&lt;br&gt;&lt;br&gt;I am alone, and feel the charm of existence in this spot.
  </code></pre>
  
  <p>My desired result would look like the following:</p>
  
  <pre><code>Array [
      "A",
      "wonderful",
      "serenity",
      "has",
      "taken",
      "possession",
      "of",
      "my",
      "entire",
      "soul.",
      "&lt;strong&gt;This is a subheadline&lt;/strong&gt;",
      "&lt;br&gt;",
      "&lt;br&gt;",
      "I",
      "am",
      "alone,",
      "and",
      "feel",
      "the",
      "charm",
      "of",
      "existence",
      "in",
      "this",
      "spot."
  ]
  </code></pre>
  
  <p>When i split at all whitespaces i do get the words, but the <code>"&lt;br&gt;"</code> won't be added as a new array entry. I also don't want to split the subheadline and markup.</p>
  
  <p>The reason why i want to do this, is that i add sequence after sequence to a p-tag and when the height gets bigger than the surrounding element i remove the last added sequence and create a new floating p-tag. When i splitted it into sentences i saw, that the breakup was not good enough to ensure a good reading flow.</p>
  
  <p>An example what i try to achieve can you see <a href="http://ol.tobiaskun.com/text.html" rel="nofollow noreferrer">here</a></p>
  
  <p>If you need any further information i will be glad to give it to you.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Tobias</p>
  
  <p><strong>EDIT</strong> </p>
  
  <p>The string could contain more html tags in the future. Is there a way to not touch anything between these tags?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I created a jsfiddle: <a href="http://jsfiddle.net/m9r9q/1/" rel="nofollow noreferrer">http://jsfiddle.net/m9r9q/1/</a></p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>Would it be a good idea to remove all html tags with encapsulated text and replace it with placeholders? Then split the string into words and add the untouched html-tags when the placeholder is reached? What would be the regex to extract all html tags?</p>