jquery - Use split to split only text?

Question

My code splits the text and place a html code after a certain number of words. It's working, the problem is that the split function not only splits text, but also splits HTML. How can I configure it to split text only? Let's say I have an article and I need a banner to appear in the middle of the article, if I don't take care, I'll split some div or something like that.

Here's the code:

<script type="text/javascript">
 jQuery(function($) {


var wordList = $(".newsitem_text").html().split(' ');
var newHtml = '';

$.each(wordList, function(index, word){
  newHtml += ' ' + word;
  if (index == 10) {
    newHtml += 'Some HTML goes here'     
  }        
})
;

$(".newsitem_text").html(newHtml);

});

</script>

Answer 1

You should use jQuery's .contents() method and split only text tags while copying everything else verbatim. Something like this:

jQuery(function($) {

  var newHtml = '';
  var count = 0;

  function check() {
    if (count >= 20) {
      newHtml += 'Some HTML goes here'     
      count = 0;
    }
  }

  $(".newsitem_text").contents().each(function () {

    if (this.nodeType != 3) {
      newHtml += this.outerHTML;
      count += $(this).text().trim().split(/\s+/).length;
    }
    else {
      var wordList = $(this).text().trim().split(/\s+/);

      $.each(wordList, function(index, word){
        count++;
        check();
        newHtml += ' ' + word;
      })
    }

  });

  check();

  $(".newsitem_text").html(newHtml);

});