Question

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

我正在尝试创建一个脚本，它会生成一个html文本，并在计算x个单词后将其放在博客文章中，让它在计算10个单词后说出来。我能够通过使用正则表达式（拆分）来实现这一点，但正则表达式正在剥离我的帖子的HTML。从理论上讲，它非常简单，但我不知道为什么它在实践中如此复杂。我不能使用段落或任何元素作为参考，它必须仅在文本之后插入html，而不是在代码标记内插入，例如，我有<script> some code </script> My blog text --- The text that needs to be inserted --，它不能算什么＆＃39 ; s在脚本标记内，它应该只计算纯文本并在其后插入新的html并进行渲染。让我们说它与使用WYSIWG编辑器输入文本和插入图像的逻辑相同。这很难解释。

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

这是我上次尝试的内容，没有任何成功（代码无效）：

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

更新 - 这是我开始在stackoverflow中打开有关此主题的主题时，我将提供链接以供参考：

Answer 1

您可以使用正则表达式在n字词后添加文字：

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

（您可以将25更改为n个字词数。）

请参阅此working example。

Answer 2

尝试使用.html()，String.prototype.replace()与RegExp /\w+/匹配字母数字字符后跟字母数字字符，创建一个递增的变量，直到达到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>

Answer 3

对此的一种解决方法如下，尽管可悲的是，有点幼稚，我无法帮助，但怀疑，过于复杂。但是：

// 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');

＆＃13;

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');

＆＃13;

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

＆＃13;

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

＆＃13;

JS Fiddle demo

上述方法的注意事项：

它要求所有单词都保存在单个文本节点中;它甚至不会尝试计算可能在一个元素中开始并在兄弟元素内部结束的单词。
它不允许 - 在其当前实现中 - 以任何方式将非文本插入到created元素中（尽管可以通过使用elem.innerHTML代替{{1}来允许这样做但是它确实将created-element返回给调用上下文，因此它可以被缓存或链接，这允许以某种方式操纵created元素。
有些检查，如果不是大多数，都非常幼稚;并且可以从扩展到受益于您自己的特定边缘案例。

参考文献：

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。

Answer 4

看起来不可能或不那么简单。正则表达式只是剥离HTML标记，而其他解决方案并没有帮助。

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

4 个答案: