Question

对我来说，一个有趣的挑战是，我有一个div块，其中包含文本（内容可以包含不同数量的任何元素，如<p> <ul> <div>等，就像编辑过的文章一样）。本文已经发布在我的网站上，并且我添加了另一个div块，该块在加载此文章后出现。我需要的是将这个块放在文章的末尾，这个块应该在文章中包含文字，如下图所示。目前“也与本文相关” - 它是一个我想插入的块。

当然，我可以在最后一个<p>元素之前添加此块，但最后一个元素可能是<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>

Jquery代码：

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

enter image description here

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>

Answer 2

您最好的选择是使用当前浏览器的选择处理。您可以使用选择按一定数量的字符导航，然后插入一个元素......但正如Michal Klouda所述 - 将会有一些技巧涉及（即避免使用特殊标签和情况..哦和as通常必须尽可能地跨浏览器。

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

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

TextRange offsetLeft and offsetTop broken in Internet Explorer 8 Standards Mode (IE8)

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

2 个答案: