javascript - 将 div block 插入另一个 div，在指定字符数之前

Question

对我来说，一个非常有趣的挑战是，我有一个 div包含文本的 block (内容可以包含不同数量的任何元素，如 <p> <ul> <div> 等，就像编辑过的文章)。这篇文章已经发布在我的网站上，我又添加了一篇div加载本文后出现的 block 。我需要的是将这个 block 放在文章的末尾，这个 block 应该像下图一样将文本环绕在文章周围。目前“也与本文相关” - 这是我想插入的 block 。

当然我可以在最后一个 <p> 之前附加这个 block 元素，但最后一个元素可能是 <ul>或另一个小 <div>或 <span> ，我有不同的文章，用户可以发布。

我想的是得到我的 Article div 的长度并从当前长度中减去适合我的字符数并插入相关文章 <div>那里。

所以，例如(文章文本要大得多，但这很简单):

<div id="article">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry 
  <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
</div>

<div id="related_article">
   <ul>
     <li> Item1</li>
     <li> Item2</li>
     <li> Item3</li>
  </ul>
</div>

J查询代码:

$(document).ready(function() {
  var text_length = $.trim($("#article").text()).length;
  var length_before = 30;//for example
  var related = $('div#related_article');
  var content = $('div#article');
  var substract = text_length - length_before;
  //is it possible to put this *related* div
  //into substract point in content at the end of it.  
});

我应该使用正则表达式吗？还是有可能以某种方式这样做？也许我只是愚蠢而错过了一些东西，please show me the way of action .

英语不是我的母语，所以可能会有语法错误

正如人们所问，我提供了一个文章如何看起来像的例子

Here is an example of how can looks like my article it can contain a lot of tags

Answer 1

$(document).ready(function() {
    var textLength = 15;
    var currentLength = 0;
    var $lastChild = $("div#article").children(":last-child");
    currentLength = $lastChild.text().length;
    while(currentLength < textLength) {
        $lastChild = $lastChild.prev();
        currentLength = currentLength + $lastChild.text().length;
    }
    var $related = $("div#related_article");
    $related.insertBefore($lastChild);
});

如果相关文章下方的文本长度大于 15，则上述脚本会在特定标签上方插入相关文章。您可以根据需要更改 textLength。

下面的代码遍历所有叶节点，并将相关文章插入到所需的索引处。

var $articleObj = $("div#article");
var $related = $("div#related_article");
var textLength = 15;

function addRelatedArticle($parentObj, currentLength) {
    var $lastChild = $parentObj.children(":last-child");
    currentLength = currentLength + $lastChild.text().trim().length;
    while($lastChild.length > 0 && currentLength < textLength) {
        $lastChild = $lastChild.prev();
        currentLength = currentLength + $lastChild.text().trim().length;
    }
    if ($lastChild.text().trim().length < $lastChild.html().trim().length) {
        addRelatedArticle($lastChild, currentLength - $lastChild.text().trim().length);
    } else {
        if (currentLength == textLength) {
            $related.insertBefore($lastChild);
        } else {
            var lastChildText = $lastChild.text().trim();
            $lastChild.html($related);
            $lastChild.prepend(lastChildText.slice(0,currentLength - textLength));
            $lastChild.append(lastChildText.slice(currentLength - textLength));
        }
    }       
}
addRelatedArticle($articleObj, 0);

我没有检查现有文章是否至少具有所需的最少字符数。 该脚本的主要限制是它只会搜索叶节点。即它可以在下面的 HTML 上正常工作。

<div>
    <div>Some junk text</div>
    <div> more junk texts</div>
</div>

但它可能不适用于以下 HTML。

<div>
    Junk text
    <div>More junk</div>
    testing text
</div>