divの行数をカウントし、最初の数行のtextContentを取得する方法はありますか-Javascript [duplicate]

-1
user1234 2021-01-08 22:23.

私の目標は、divの最初の3行のtextContentの長さを取得することです。例:

<div id="content" style="width: 100%;  
                line-height: 20px"> 
        <p>hello how are you?</p> 
        <p>hello how are you too?</p> 
        <p>hello how are you john? </p> 
        <p>hello how are you sphia?</p> 
    </div> 

以下を使用して、divに含まれる行数を数えることができます。

 function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}

ただし、上記の場合、最初の3行のテキストの長さを見つける方法があるかどうかを知りたいです。

 <p>hello how are you?</p> 
            <p>hello how are you too?</p> 
            <p>hello how are you john? </p> 

私がするようにしましょう:

var lines = countLines(); // 4
if (lines > 3) {
  test = document.getElementById("content").textContent.length;
// get the length of first 3 lines
}

これはjavascriptで可能ですか?

1 answers

2
WiatroBosy 2021-01-08 22:42.

jQueryが必要な場合

let p = $('#content').find('p'); for (i = 0; i < 3; i++) { console.log($(p[i]).text().length);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div>

jsを終了します

let p=document.getElementById("content");
let v=p.getElementsByTagName("p"); 
for (i = 0; i < 3; i++) {
  console.log(v[i].innerHTML.length);
}
<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div> 

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

3年ぶりにエクアドルで捕まったマーク・ザッカーバーグを振り下ろそうとした男

3年ぶりにエクアドルで捕まったマーク・ザッカーバーグを振り下ろそうとした男

マーク・ザッカーバーグは2018年4月に議会で証言しました。数年前、ポール・セグリアという男がFacebookのCEOであるマーク・ザッカーバーグに対して数百万ドルの訴訟を起こしました。 -サイトの所有権。

スキンのファンエリアへの乱闘流出-ジェット共同練習

スキンのファンエリアへの乱闘流出-ジェット共同練習

ジェッツとスキンズは、日曜日の午後、ワシントンのリッチモンドトレーニングキャンプでの合同練習に参加しました。たまたま、2つのチームの間で事態が熱くなり、いくつかの小競り合いが発生し、最終的には大騒ぎになりました。ワシントンの攻撃的なプレーが終了した後、プレーヤーはお互いに叫んでいたようです。ワシントンの後半のヒットはモーガンモーゼスに取り組みます。

エドワードノートンのスモーキーでスターがちりばめられたジョナサンレセムのマザーレスブルックリンの適応の予告編を見る

エドワードノートンのスモーキーでスターがちりばめられたジョナサンレセムのマザーレスブルックリンの適応の予告編を見る

エドワードノートンは、ジョナサンレセムのジョイシアン1999年の小説マザーレスブルックリンが出版されて以来、スクリーンに登場させたいと考えていました。20年後の今、ハードボイルドストーリーの予告編が到着しました。これは、レセムのストーリーを1950年代に戻し、多くの見慣れた顔を牽引します。

偶発的なキティ猫フィルターはパキスタンの大臣の深刻なライブストリームを弱体化させます

偶発的なキティ猫フィルターはパキスタンの大臣の深刻なライブストリームを弱体化させます

事件の芸術的な再現。いいえ、ShaukatYousafzaiは毛皮ではありません。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で 1 日を過ごし、ジェニファー・ロペス、ジュリアン・ハフなども。ハリウッドからニューヨークまで、そしてその間のあらゆる場所で、お気に入りのスターの活躍をご覧ください!

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

捜査官は、グループと容疑者が攻撃の前にお互いを知っていたかどうかを調べています

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

2021 年には、サービスを提供する顧客と顧客に伝えるストーリーについて知っていることをすべて再考することをお勧めします。あとずさりする。

マンモスロスは私の心を愛に開いた

マンモスロスは私の心を愛に開いた

フェリックス ザ キャットの 9 歳の誕生日の日に、大人になってからの最大の損失の 1 つである 2013 年のソフィーを思い出します。私はこのエッセイを書き、2013 年にこのプラットフォームで簡単に共有しました。

あなたがインターネットがあなたに望んでいる人になれないとき

あなたがインターネットがあなたに望んでいる人になれないとき

私は「列車事故」という言葉が嫌いです。人々は自分自身の道徳的羅針盤に安らぎを覚え、そうすることで自分自身が判断を下していることに気づきます。

DFINITY ブロックチェーンの分散型クラウド ビジョン

編集者注: アーカイブ目的で保存されている DFINITY ブログの古い資料を表示しています。

DFINITY ブロックチェーンの分散型クラウド ビジョン

この投稿では、DFINITY チームの分散型クラウドのビジョンと、それが従来のブロックチェーンやアマゾン ウェブ サービスなどの既存のクラウド プロバイダーとどのように関連しているかを探ります。大規模なネットワークによって適用される DFINITY テクノロジのデモンストレーションが 2017 年の秋に行われ、その後、非営利財団を支援するための主要な資金調達が行われ、「オープン クラウド」ネットワークは 2018 年の初夏に開始される予定です。 .

Language