のJavaScript/jQueryの - 私はリンクが含まれている記述があり

Question

シナリオ

スライスされた段落テキストコンテンツにアンカータグを保管してください。説明に100文字以上が含まれている場合は、最初の文字から100文字目までのテキストのみを含むようにスライスします。また、省略記号とその他のリンクをクリックして残りのコンテンツを表示します。

スライス問題は、それがコンテンツ内のリンクを削除します。

私の思考/望ましい結果

私は全体の一貫性を保つためにスライス記述の正確な長さを得るために、jQueryのは.text（）メソッドを使用しています。私が正しいと思っている場合、.text（）は生の内容を取得するだけで、アンカータグが取り除かれているのです。ただし、.html（）メソッドを使用した場合、HTMLタグの文字数とその属性もカウントされるため、テキストのスライス位置の整合性を保つのが難しくなります。これは私がこだわっている場所です。

最終的には、リンクを維持したまま正確に100文字で説明をスライスしたいと思います。また、各ページに複数の説明が表示されるので、クリック時の個々の固有の説明を展開して最小限に抑えたい。

はCodePenに周りの再生：https://codepen.io/andrewgarrison/pen/BdJQGz/

$(document).ready(function() { 
 
    var minimized_elements = $('p.description'); 
 
    var minimize_character_count = 99; 
 

 
    minimized_elements.each(function() { 
 
     var t = $(this).text(); 
 
     if (t.length < minimize_character_count) return; 
 

 
     $(this).html(
 
      t.slice(0, minimize_character_count) 
 
      + '<span>... </span><a href="#" class="more">More</a>' 
 
      + '<span style="display:none;">' 
 
      + t.slice(minimize_character_count, t.length) + ' <a href="#" class="less">Less</a></span>' 
 
     ); 
 

 
    }); 
 

 
    $('a.more', minimized_elements).click(function (event) { 
 
     event.preventDefault(); 
 
     $(this).hide().prev().hide(); 
 
     $(this).next().show(); 
 
    }); 
 

 
    $('a.less', minimized_elements).click(function (event) { 
 
     event.preventDefault(); 
 
     $(this).parent().hide().prev().show().prev().show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Sliced Text</h3> 
 
<p class="description">This product is super hot. You can go to <a href="http://www.someurlgoeshere.org">this awesome website</a> and order it right now! But wait, that's not all. If you buy three you get 20 more free. That's right. Buy now from <a href="#">here</a> and this could all be yours.</p>

感謝を！

Answer 1

jQueryコンテンツ関数を使用すると、テキストノードを含む要素の子のリストを取得できます。

次に、文字カウントが最大値を超えるまで子をループして追加できます。しかし、残りの部分をここに入れておくのではなく、段落を複製して、両者の間でトグルするだけです。リンク内で分割が発生した場合（たとえば、minimize_character_countを50に設定した場合）、リンクの一部のみが表示されますが、それでも機能します。

$(document).ready(function() { 
    var minimized_elements = $('p.description'); 
    var maxchars = 99; 

    minimized_elements.each(function() { 
     var $this = $(this); 
     $this.hide(); 
     var children = $this.contents(); 
     var $shortDesc = $('<div />'); 
     var len = children.length; 
     var count = 0; 
     var i = 0; 
     while (i < len) { 
     var $elem = $(children[i]).clone(); 
     var text = $elem.text(); 
     var l = text.length; 
     if (count + l > maxchars) { 
      var newText = text.slice(0, maxchars - count); 
      if ($elem.get(0).nodeType === 3) { 
      $elem = document.createTextNode(newText); 
      } else { 
      $elem.text(newText); 
      } 
      $shortDesc.append($elem); 
      break; 
     } 
     count += l; 
     $shortDesc.append($elem); 
     i++; 
     } 
     $shortDesc.append($('<span>... </span>')); 

     $shortDesc.append($('<a href="#" class="more">More</a>').on('click', function(){ 
     $this.show(); 
     $shortDesc.hide(); 
     })); 
     $this.append($('<a href="#" class="less">Less</a>').on('click', function() { 
     $this.hide(); 
     $shortDesc.show(); 
     })); 

     $this.after($shortDesc); 
    }); 
}); 

ここでデモです：https://codepen.io/anon/pen/eEyvpY?editors=1011

Answer 2

私は私はあなたがここで行うために探しているものを達成するために管理していると思う：

1. レコード：私はされたましたhttps://codepen.io/hydrospell/pen/EvoZbB

   手順すべての<a>のテキスト、URL、およびインデックス が元の文字列に含まれており、それらを配列で収集します

2. HTMLを考慮せずに文字列を切り捨てます（.text()）
3. リンクされた各テキストのリンクを、収集されたインデックスの助けによって代替します。最後のリンクも同様に切り捨てる必要があるかどうかについて考慮する必要があります。

こちらがお役に立てば幸いです。

これは私の最初のstackoverflowの答えですので、どんなフォーマット/リンクのエチケットfaux pasを許してください！