javascript - jquery - 使用 split 仅分割文本？

Question

我的代码分割文本并在一定数量的单词后面放置一个 html 代码。它可以工作，问题是 split 函数不仅可以分割文本，还可以分割 HTML。如何将其配置为仅拆分文本？假设我有一篇文章，我需要在文章中间出现一个横幅，如果我不小心，我会分割一些 div 或类似的东西。

代码如下:

<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

您应该使用 jQuery 的 .contents() 方法并仅拆分文本标记，同时逐字复制其他所有内容。像这样的事情:

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

});