2

对我来说一个非常有趣的挑战是，我有一个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。

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

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

这是一个看起来像我的文章的示例，它可以包含很多标签

在此处输入图像描述

4

2 回答 2

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>
于 2012-10-24T15:01:49.260 回答
0

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

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

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

TextRange offsetLeft 和 offsetTop 在 Internet Explorer 8 标准模式 (IE8) 中损坏

于 2012-10-24T13:53:21.173 回答