Javascript 在指定的字符数之前，将div块插入到另一个div中

对我来说，一个相当有趣的挑战是，我有一个包含文本的

div

块（内容可以包含不同数量的任何元素，如

等，类似于编辑过的文章）。这篇文章已经在我的网站上发布了，我添加了另一个

div

块，在这篇文章加载后出现。我需要的是把这一块放在文章的末尾，这一块应该像下面的图片一样将文本环绕在文章周围。目前“也与本文相关”-我想插入一块

当然，我可以在最后一个

元素之前添加此块，但最后一个元素可能是

或另一个小的

或

，我有不同的文章，用户可以发布

我想的是得到我的

文章div的长度

并从适合我的字符数的当前长度中减去，然后在那里插入相关文章

因此，举个例子（文章文本要大得多，但这很简单）：

我应该用正则表达式吗？还是有可能这样做？也许我只是愚蠢地错过了什么，

请告诉我行动的方式

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

正如人们所问，我举了一个例子来说明这篇文章是什么样子的


您最好使用当前浏览器的选择处理。您可以使用所选内容导航一定数量的字符，然后插入一个元素。。。但正如Michal Klouda所说的，这其中会涉及一些技巧（例如，避免特殊的标签和情况……哦，和往常一样，必须尽可能地跨浏览器）

这是我的答案，显示了不同主题的代码，我现在没有时间详细讨论，但它应该给你一些东西来研究

以下代码基于用户单击事件工作。。。但是，它可以反转为以特定元素和特定字符偏移量为目标。您主要应该查看
window.getSelection
或
document.selection
返回的对象可用的方法，以及不同浏览器提供的相关范围对象

$（文档）.ready（函数（）{
var textLength=15；
var currentLength=0；
var$lastChild=$（“div#article”）.children（“：lastchildren”）；
currentLength=$lastChild.text（）.length；
while（当前长度<文本长度）{
$lastChild=$lastChild.prev（）；
currentLength=currentLength+$lastChild.text（）.length；
}
var$相关=$（“部门相关文章”）；
$related.insertBefore（$lastChild）；
});

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

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

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

var$articleObj=$（“div#article”）；
var$相关=$（“部门相关文章”）；
var textLength=15；
函数addRelatedArticle（$parentObj，currentLength）{
var$lastChild=$parentObj.children（“：lastchildren”）；
currentLength=currentLength+$lastChild.text（）.trim（）.length；
而（$lastChild.length>0&¤tLength

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

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

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


一些垃圾文本
更多垃圾短信

但它可能无法与下面的HTML配合使用

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

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


垃圾文本
更多的垃圾
测试文本
这不会那么容易，你需要确保你没有弄坏东西。。e、 g.避免在锚定标签中插入div等。是的，这就是我请求建议的原因谢谢你，我知道这一点，但主要问题是，例如，如果我的最后一个元素
只包含两个单词，
相关文章将出现在本文底部，它将不会包装它，此解决方案在某些情况下会起作用，但我不满意上面的代码将在标签上方插入相关文章。最终的HTML将与ArticleRelatedArticles内容中的任何值一样不需要使用p标记。它可以是任何标签，如ul或div或任何东西。
。如果你想让它与众不同，请提供一些例子。我在我的帖子中添加了链接，你可以看一下，它看起来如何。我编辑了解决方案，以提供另一种插入相关文章的方式。我尝试了你的解决方案，它在某些情况下是有效的，但不是全部，但无论如何，谢谢你不要担心——等我有时间，我会建立一个例子，就在那一刻，比特从我的脚上窜了下来（tho:）
<div>
    Junk text
    <div>More junk</div>
    testing text
</div>