Jquery insert html after x number of words inside a div without using split

Question

It's been 4 days, I've tried many different methods, now I'm kind of almost giving up, it seems like something impossible to do...

I'm trying to create a script where it will generate a html text and place it inside a blog post after it counts x number of words, let's say after it counts 10 words. I was able to achieve that by using regex (split), but regex is stripping my post's HTML. In theory it's something really simple, but I don't know why it is so complicated in practice. I can't use paragraphs or any elements as references, it must insert the html after text only, but not inside code tags, for example, I have <script> some code </script> My blog text --- The text that needs to be inserted --, it can't count what's inside the script tags, it should count only plain text and insert the new html after it and be rendered. Let's say it's the same logic of typing text and inserting images using WYSIWG editor. It's really hard to explain.

Basically I need something that just get a banner and insert it after x number of words in text, just that.

Here's what I've last tried, without any success (Code not working):

<div style="width:1000px; margin-left:auto; margin-right:auto" class="newsitem_text">
    <div style="width:980px; margin-left:auto; margin-right:auto">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque urna eu pulvinar maximus. Sed elit nunc, vestibulum ut eros vitae, pellentesque rhoncus ipsum. In et metus non diam porttitor maximus iaculis nec lectus. Quisque sodales scelerisque auctor. Nam rutrum venenatis eros, eu condimentum erat placerat ut. Pellentesque sed tempus sem, eu viverra ipsum. Vestibulum nec turpis convallis, dapibus massa vitae, posuere mauris. Suspendisse mattis tincidunt lorem. Aliquam erat volutpat. Nullam at tincidunt erat, maximus laoreet ipsum.
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    jQuery(function ($) {

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

        $.each(wordList, function(index, word) {
            newHtml += ' ' + word;
            if (index == 2) {
                newHtml += '<img src="https://www.google.com.br/logos/doodles/2015/adolphe-saxs-201st-birthday-6443879796572160.2-res.png" />'     
            }        
        });

        $(newHtml).html('').insertAfter(".newsitem_text");
    });

</script>

UPDATE - This is when I started opening topics in stackoverflow about this subject, I'll give the links for reference:

• jquery code not working in site
• jquery calling null element that actually exists
• Jquery use "count" instead of "slice"
• Jquery script operator == not working in website, but works in local
• Is it possible to skip html tags using jquery and split method?
• jquery - Use split to split only text?
• How can I use split but skip html/javascript/php and other inner tags?
• Jquery - Break/Prevent each loop

Answer 1

One approach to this is the following, albeit it is, sadly, somewhat naive and, I can't help but suspect, overly-complex. However:

// a simple utility function to get only the actual words
// from the supplied textNode (though this should work for
// elements also):
function getActualWords(node) {

    // gets the textContent of the node,
    // splits that string on one-or-more ('+')
    // white-space characters ('\s');
    // filters the array returned by split():
    return node.textContent.split(/\s+/).filter(function (word) {
        // word is the current array-element
        // (a 'word') in the array over
        // which we're iterating using
        // Array.prototype.filter();
        // here if the word, with leading
        // and trailing white-space removed
        // (using String.prototype.trim())
        // has a length greater than 0
        // (a falsey value) the word is kept
        // in the array returned by filter:
        return word.trim().length;

        // note that negative numbers are
        // also truthy, but no string can
        // have a negative length; so the
        // comparison is effectively, if
        // not explicitly 'greater than zero'
        // rather than simply 'not-zero'
    });
}

// named function to insert the specified
// element after the nth word:
function insertElemAfterNthWord(opts) {

    // defining the defaults for the function
    // (which can be overridden via the opts
    // Object):
    var defaults = {

        // the word after-which to insert the
        // the new element:
        'nth': 5,

        // the text of the new element:
            'elemText': 'new element',

        // the type of element (note no '<' or '>'):
            'elemTag': 'div'
    };

    // iterating over the supplied opts Object to update
    // the defaults with the user-supplied options using
    // for...in loop:
    for (var prop in opts) {

        // if the opts Object has a property and
        // that property is not inherited from the
        // prototype chain:
        if (opts.hasOwnProperty(prop)) {

            // we set the defaults property
            // to the property-value held
            // in the opts Object:
            defaults[prop] = opts[prop];
        }
    }

    // aliasing the defaults object (simply to save
    // typing; this is not essential):
    var d = defaults,

        // ensuring that the supplied string,
        // specifying the element-type has no
        // '<' or '>' characters (to ensure validty
        // this should be extended further to
        // ensure only alphabetical characters are kept):
        tag = d.elemTag.replace(/<|>/g, ''),

        // creating the new element:
        elem = document.createElement(tag);

    // setting the textContent of the new element:
    elem.textContent = d.elemText;

    // ensuring that the d.nth variable is
    // a number, not a string, in base-10:
    d.nth = parseInt(d.nth, 10);

    // if a node was specified:
    if (d.node) {

        // setting the 'n' variable to hold
        // to the firstChild of the d.node:
        var n = d.node.firstChild,

            // using the utility function (above)
            // to get an Array of only the actual 
            // words held in the node:
            words = getActualWords(n),

            // getting the number of words held
            // in the Array of words:
            wordCount = words.length;

        // while (n.nodeType is not a textNode OR
        // d.nth is a greater number than the number
        // of words in the node) AND the node has
        // a following sibling node:
        while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) {

            // we update n to the next-sibling:
            n = n.nextSibling;

            // we get an array of words from
            // newly-assigned node:
            words = getActualWords(n);

            // we update the wordCount, in
            // order to progress through:
            wordCount = words.length;
        }

        // if the number of words is less than
        // the nth word after which we want to
        // insert the element, we return from
        // the function (doing nothing):
        if (getActualWords(n).length < d.nth) {
            return;

        // otherwise:
        } else {

            // again we get an Array of actual words,
            // we slice that Array and then get the
            // last array-element from that array,
            // using Array.prototype.pop():
            var w = getActualWords(n).slice(0, d.nth).pop(),

                // here we get the index of that word
                // (note that this is naive, and relies
                // upon the word being unique as a
                // proof-of-concept; I plan to update later):
                i = n.textContent.indexOf(w);

                // we split the n textNode into
                // two separate textNodes, at
                // supplied index ('i + w.length');
                // n remains the shortened 'first'
                // textNode:
                n.splitText(i + w.length);

            // navigating to the parentNode, and
            // using insertBefore() to insert the
            // new element ('elem') before the
            // next-siblin of the n textNode:
            n.parentNode.insertBefore(elem, n.nextSibling);

            // doing exactly the same, but adding a
            // newly-created textNode (of a space character)
            // between the 'n' textNode (which by definition
            // ends without a space) and newly-inserted
            // element:
            n.parentNode.insertBefore(document.createTextNode(' '), n.nextSibling);

            // joining adjacent, but unconnected,
            // textNodes (n and the newly-inserted
            // space character) together, to become
            // a single node:
            n.parentNode.normalize();

            // returning the newly-created element
            // so that it can be modified if required
            // or simply cached:
            return elem;
        }

    }
}


// calling the function, specifying the
// user-defined properties:
insertElemAfterNthWord({
    // after the tenth word:
    'nth': 10,
    // the element-type (a span):
        'elemTag': 'span',

    // setting the text of that new element:
        'elemText': 'this is the newly-added text inside the newly-added element!',

    // specifying the node into which the element
    // should inserted:
        'node': document.querySelector('div > div')

// chaining the function, to use the Element.classList
// API to add the 'newlyAdded' class to the
// newly-created element:
}).classList.add('newlyAdded');

function getActualWords(node) {
  return node.textContent.split(/\s+/).filter(function(word) {
    return word.trim().length;
  });
}

function insertElemAfterNthWord(opts) {
  var defaults = {
    'nth': 5,
    'elemText': 'new element',
    'elemTag': 'div'
  };

  for (var prop in opts) {
    if (opts.hasOwnProperty(prop)) {
      defaults[prop] = opts[prop];
    }
  }

  var d = defaults,
    tag = d.elemTag.replace(/<|>/g, ''),
    elem = document.createElement(tag);

  elem.textContent = d.elemText;

  d.nth = parseInt(d.nth, 10);

  if (d.node) {
    var n = d.node.firstChild,
      words = getActualWords(n),
      wordCount = words.length;

    while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) {

      n = n.nextSibling;
      words = getActualWords(n);
      wordCount = words.length;
    }
    if (getActualWords(n).length < d.nth) {
      return;
    } else {
      var w = getActualWords(n).slice(0, d.nth).pop(),
        i = n.textContent.indexOf(w);
      n.splitText(i + w.length);
      n.parentNode.insertBefore(elem, n.nextSibling);
      n.parentNode.insertBefore(document.createTextNode(' '), n.nextSibling);
      n.parentNode.normalize();

      return elem;
    }

  }
}


insertElemAfterNthWord({
  'nth': 10,
  'elemTag': 'span',
  'elemText': 'this is the newly-added text inside the newly-added element!',
  'node': document.querySelector('div > div')
}).classList.add('newlyAdded');

span {
  color: #f90;
}
div {
  margin-left: auto;
  margin-right: auto;
}
.newlyAdded {
  background-color: #ffa;
}

<div class="newsitem_text">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque urna eu pulvinar maximus. Sed elit nunc, vestibulum ut eros vitae, pellentesque rhoncus ipsum. In et metus non diam porttitor maximus iaculis nec lectus. Quisque sodales scelerisque
    auctor. Nam rutrum venenatis eros, eu condimentum erat placerat ut. Pellentesque sed tempus sem, eu viverra ipsum. Vestibulum nec turpis convallis, dapibus massa vitae, posuere mauris. Suspendisse mattis tincidunt lorem. Aliquam erat volutpat. Nullam
    at tincidunt erat, maximus laoreet ipsum.</div>

JS Fiddle demo.

Caveats of the above approach:

• It requires that all the words are held in a single text node; it doesn't even attempt to count words that might begin in one element and end inside of a sibling-element.
• It doesn't allow – in its current implementation – any way of inserting non-text into the created-element (although this could be allowed via the use of elem.innerHTML in place of elem.textContent), but it does return the created-element to the calling context so it can be cached or chained, which allows that created-element to be manipulated in some ways.
• Some of the checks, if not most, are profoundly naive; and would benefit from extension to account for your own particular edge-cases.

References:

• Array.prototype.filter().
• Array.prototype.pop().
• Array.prototype.slice().
• Document.createElement().
• Document.createTextNode().
• Document.querySelector().
• Element.classList.
• for...in loop.
• Guide to JavaScript Regular Expressions.
• Node.firstChild.
• Node.insertBefore().
• Node.nextSibling.
• Node.nodeType.
• Node.normalize().
• Object.hasOwnProperty().
• parseInt().
• String.prototype.indexOf().
• String.prototype.replace().
• String.prototype.split().
• String.prototype.trim().
• Text.splitText().
• while () {...} loop.