Jquery在div内的x个单词之后插入html而不使用split

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...

已经4天了,我尝试了很多不同的方法,现在我几乎放弃了,似乎无法做到......

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.

我正在尝试创建一个脚本,它会生成一个html文本,并在计算x个单词后将其放在博客文章中,让我们说它在计算10个单词之后。我能够通过使用正则表达式(拆分)来实现这一点,但正则表达式正在剥离我的帖子的HTML。从理论上讲,它非常简单,但我不知道为什么它在实践中如此复杂。我不能使用段落或任何元素作为引用,它必须仅在文本之后插入html,而不是在代码标记内部,例如,我有

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

基本上我需要的东西只是得到一个横幅并插入文本中的x个单词之后,就是这样。

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 * about this subject, I'll give the links for reference:

更新 - 这是我开始在*中打开关于这个主题的主题,我将提供链接以供参考:

• jquery code not working in site

jquery代码在站点中不起作用

• jquery calling null element that actually exists

jquery调用实际存在的null元素

• Jquery use "count" instead of "slice"

Jquery使用“count”而不是“slice”

• Jquery script operator == not working in website, but works in local

Jquery脚本运算符==不在网站上工作,但在本地工作

• Is it possible to skip html tags using jquery and split method?

是否可以使用jquery和split方法跳过html标签?

• jquery - Use split to split only text?

jquery - 使用split来只分割文本?

• How can I use split but skip html/javascript/php and other inner tags?

我如何使用拆分但跳过html / javascript / php和其他内部标签?

• Jquery - Break/Prevent each loop

Jquery - 中断/阻止每个循环

4 个解决方案

#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.

JS小提琴演示。

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.

它不允许 - 在其当前实现中 - 以任何方式将非文本插入到created元素中(尽管可以通过使用elem.innerHTML代替elem.textContent来允许),但它确实返回创建的元素 - 调用上下文的元素,因此它可以被缓存或链接,这允许以某种方式操纵created元素。

• 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.

JavaScript正则表达式指南。

• 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.

while(){...}循环。

#2

You can use regex to add text after n words:

您可以使用正则表达式在n个单词后添加文本:

$("div").html($("div").text().replace(/([a-zA-Z]+[.,]? ){25}/, function(x) { return x + "<p>This paragraph added after 25 words.</p>"; }));

(You can change the 25 to n number of words).

(您可以将25到n个单词更改)。

See this working example.

请参阅此工作示例。

#3

Try using .html() , String.prototype.replace() with RegExp /\w+/ to match aplhanumeric characters followed by alphanumeric characters , creating a variable to increment until 10 reached

尝试使用.html(),String.prototype.replace()和RegExp / \ w + /来匹配aplhanumeric字符后跟字母数字字符,创建一个递增的变量,直到达到10

var x = 10;
$(".newsitem_text div").html(function(_, html) {
  var index = -1;
  return html.replace(/\w+/g, function(match) {
    ++index;
    return index === x
           ? ' <img src="https://www.google.com.br/logos/doodles/2015/adolphe-saxs-201st-birthday-6443879796572160.2-res.png" /> ' 
           : match
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

#4

Looks like it's not possible or as simple to do. Regex is just stripping the HTML tags and other solutions didn't help.

看起来这样做不可能或不那么简单。正则表达式只是剥离HTML标签,其他解决方案没有帮助。