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主に、またはによって返されるオブジェクトdocument.selection、およびさまざまなブラウザによって提供される関連するRangeオブジェクトで使用可能なメソッドを調べる必要があります。

Internet Explorer 8標準モード（IE8）でTextRangeoffsetLeftとoffsetTopが壊れています

于 2012-10-24T13:53:21.173 に答える