[javascript]文字数をカウントしてはみ出した部分を「...」で表示させたい

前提

①「width:80%、font-size:14px」内に全角で何文字収まるか調べるcapasity関数を作成し、
②対象となるテキストの文字数をカウントするtextcount関数を作成、
③はみ出した部分を「...」で表示するshorten関数を作成
④ページ読み込み時にshorten関数を実行

というプログラムをネットのものを参考にしつつ自分のサイトに合うように改変した以下のソースコードをまず見て頂けますでしょうか。

該当のソースコード

html
1<style type="text/css">
2		.sample {
3			width: 80%;
4			font-size: 14px;
5			border-style: solid;
6			margin-top: 30px;
7		}
8
9		.sample * {
10			display: inline-block;
11		}
12
13		.sample div {
14			background-color: yellow;
15		}
16
17		.sample span {
18			background-color: pink;
19		}
20</style>
21<body>
22	<div class="sample">
23		<div>.sampleに何文字ならキレイに収まるか調べて、</div>
24		<span>文字数が多い場合.sample > div部分を省略して表示させる</span>
25	</div>
26	<div class="sample">
27		<div>実現させたいのはページ内にあるすべての</div>
28		<span>.sample > divに同じ処理をさせたい</span>
29	</div>
30<script type="text/javascript">
31/*全角で最大何文字ならキレイに収まるかを調べる関数*/
32function capacity(s) {
33
34	//算出されたCSSを取得
35	var style = window.getComputedStyle(s);
36
37	//フォントサイズとボックスの幅を数値で取得
38	var fontsize = parseInt(style.fontSize);
39	var width = parseInt(style.width);
40
41	//ボックスに収納できる文字数
42	var mojisuu = Math.floor(width/fontsize);
43
44	return mojisuu;
45};
46
47
48/*対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数*/
49function textcount(n) {
50
51	var nagasa = 0;
52
53	for (i = 0; i < n.length; i++) {
54
55		if(n[i].match(/[ -~]/) ) {
56
57			nagasa += 0.5;
58		}
59
60		else {
61
62			nagasa += 1;
63		}
64
65
66	}
67
68	return nagasa;
69
70};
71
72
73var sample = document.querySelector(".sample");
74var str = sample.innerText;
75var strfirst = sample.firstElementChild.innerHTML;
76
77/**/
78function shorten() {
79
80	var kstr = str;
81	var count = (textcount(kstr));
82
83	if (count > capacity(sample)) {
84
85		//はみ出してる文字数+4文字をテキストの後ろから削除
86		strfirst = strfirst.slice( 0, capacity(sample) - count -4 ); 
87
88		//「…」と連結し、元のテキストを置き換える
89		sample.firstElementChild.innerHTML = strfirst + "…";
90	}
91
92	//要素の幅が十分にあればそのまま表示
93	else {
94		;
95	}
96};
97
98shorten();
99
100</script>
101</body>

発生している問題・試したこと・実現したいこと

上のプログラムだと73行目でquerySelector()メソッドを使用しているため最初の.sampleしか省略されません。

すべての.sampleの文字数を調べ、それぞれの.sampleの子要素のdivを省略させるにはどうすればいいでしょうか...？

querySelectorAll()メソッドとforEach()メソッドの反復処理を使ったりして試行錯誤してみたのですが根本的な使い方が間違ってるのか前に進めず、迷って質問させて頂きました。

どうぞよろしくお願いします。

上記のコードをforEach文で書き直したコード

html
1<script>
2<!--コメントを受け上記コードの73行目以降をforEach文で修正したものです->
3var sample = document.querySelector(".sample");
4var sampleall = document.querySelectorAll(".sample");
5
6
7sampleall.forEach(function(value){
8
9	var count = (textcount(value.innerText));
10
11	if (count > capacity(value)) {
12
13		//はみ出してる文字数+4文字をテキストの後ろから削除
14		value.firstElementChild.innerHTML = value.firstElementChild.innerHTML.slice( 0, capacity(value) - count -4 ); 
15
16		//「…」と連結し、元のテキストを置き換える
17		value.firstElementChild.innerHTML = value.firstElementChild.innerHTML + "…";
18	}
19
20	//要素の幅が十分にあればそのまま表示
21	else {
22		;
23	}
24});
25</script>
26

int32_t

2023/05/07 20:34

querySelectorAll()とforEach()を使う方針で間違っていません。それらを使ってうまくいかなかったコードを開示してください。

退会済みユーザー

2023/05/07 22:05

対象を div 要素だけにするというのはダメですか？それでよければ、テキストが領域をこえた場合に「…」を表示する text-overflow:ellipsis が使えそうですが。

yambejp

2023/05/08 00:26

「.sample」にHTMLタグがはいるとなるとぴったり収まる文字数は推定できないですね。くわえて表示上の文字と実際の文字は異なります。たとえば「>」と記載していますがHTML的には「>」など4文字で記載します。スペースを続けても1文字分しか表示されなかったりいろいろあるので、どこまでの対応が必要かよくよく検討されたほうがよいでしょう

ponta9001

2023/05/08 08:00

>int32_tさんコメントありがとうございます。誤ってコードを消してしまったため先ほど書き直したのですが、すると理想通りの動きをしてくれました！そのコードを質問の最下部に追記しました。forEach()を使うのは初めてだったためもしよければおかしな点がないか確認いただけないでしょうか？

ponta9001

2023/05/08 08:06

> yambejpさんコメントありがとうございます。おっしゃる通り参考にしたサイトにも絵文字や記号が含まれると誤差が出ると書いてありました！実装するサイトの該当テキストでは現状絵文字と記号は使ってないため考えていませんでしたが想定して対応を考えようと思います。

int32_t

2023/05/08 21:36

更新後のコードで動作は期待通りだと思います。細かいことを言うなら、 * インデントがおかしい * (textcount(value.innerText)) を囲む () は不要 * innerHTML は読むのも書くのも重たい処理なので、一度の代入で済ませるべき。〜.innerHTML = 〜.innerHTML.slice(〜) + "…"; * else に書くことがないなら else { ; } は不要

退会済みユーザー

2023/05/09 02:59

> 該当テキストでは現状絵文字と記号は使ってないそれらは除くとしても、質問に書かれた以下のコードではプロポーショナルフォントやサロゲートペアへの対応が考えられてないところに問題があるのではないですか？ > //ボックスに収納できる文字数 > var mojisuu = Math.floor(width/fontsize); > /*対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数*/ > function textcount(n) { > ...

退会済みユーザー

2023/05/11 03:40

質問者さん、その後無言ですが、コメントや回答への追記があるのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？

回答3件

質問のコメントに対する返事がないのでいろいろ不明ですが・・・

対象を div 要素にし、それにテキストが領域をこえた場合に「…」を表示する text-overflow:ellipsis を使った例を書いておきます。

html
1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6    <title></title>
7    <style type="text/css">
8        .style1
9        {
10            width: 80%;
11            overflow: hidden;
12            white-space: nowrap;
13            text-overflow: ellipsis;
14        }
15
16        .sample1
17        {
18            width: 400px;
19        }
20
21        .sample2
22        {
23            width: 200px;
24        }
25    </style>
26</head>
27<body>
28    <div class="sample1">
29		<div class="style1">.sampleに何文字ならキレイに収まるか調べて、</div>
30		<div class="style1"><span>文字数が多い場合.sample &gt; div部分を省略して表示させる</span></div>
31	</div>
32	<div class="sample2">
33		<div class="style1">実現させたいのはページ内にあるすべての</div>
34		<div class="style1"><span>.sample &gt; divに同じ処理をさせたい</span></div>
35	</div>
36</body>
37</html>

結果は以下の通りです。

イメージ説明

上はブラウザに Windows 10 の Chrome 113.0.5672.64 を使ったものです。

テキストが領域をこえた場合に三点リーダー「…」を表示する text-overflow:ellipsis はもともと IE の独自拡張だそうですが、他のブラウザでも取り入れられているようで、以下のブラウザで同様な結果となります。

Edge 113.0.1774.35, Chrome 113.0.5672.64, Firefox 112.0.2, Opera 98.0.4759.15

【追記」

下のコメント欄の 2023/05/09 12:05 の私のコメントで「質問に書かれた JavaScript のコードではプロポーショナルフォントやサロゲートペアへの対応が考えられてないところに問題があるのではないですか？　あとで、どういう問題がありそうか回答欄に追記しておきます」と書いた件です。

どのような問題がありそうかの具体例を書いておきます。以下のコードを見てください。body 要素の中にある br 要素の上の方を最初の回答に書いたように CSS の text-overflow:ellipsis を使って、br 要素の下の方を質問者さんが書いた JavaScript で処理してみます。

html
1<!DOCTYPE html>
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6    <title></title>
7    <style type="text/css">
8        .style1
9        {
10            width: 80%;
11            overflow: hidden;
12            white-space: nowrap;
13            text-overflow: ellipsis;
14        }
15
16        .style2
17        {
18            width: 80%;
19        }
20
21        .sample1
22        {
23            width: 400px;
24        }
25
26        .sample2
27        {
28            width: 200px;
29        }
30    </style>
31    <script type="text/javascript">
32        function capacity(s) {
33
34            //算出されたCSSを取得
35            var style = window.getComputedStyle(s);
36
37            //フォントサイズとボックスの幅を数値で取得
38            var fontsize = parseInt(style.fontSize);
39            var width = parseInt(style.width);
40
41            //ボックスに収納できる文字数
42            var mojisuu = Math.floor(width / fontsize);
43
44            return mojisuu;
45        };
46
47        function textcount(n) {
48            var nagasa = 0;
49            for (i = 0; i < n.length; i++) {
50                if (n[i].match(/[ -~]/)) {
51
52                    nagasa += 0.5;
53                }
54
55                else {
56
57                    nagasa += 1;
58                }
59            }
60
61            return nagasa;
62        };
63
64        window.addEventListener("DOMContentLoaded", () => {
65            var sampleall = document.querySelectorAll(".style1");
66            sampleall.forEach(function (value) {
67                var count = (textcount(value.innerText));
68                var cap = capacity(value);
69                console.log(`count: ${count}, capacity: ${cap}`);
70            });
71
72            var sampleall2 = document.querySelectorAll(".style2");
73            sampleall2.forEach(function (value) {
74                var count = (textcount(value.innerText));
75
76                if (count > capacity(value)) {
77
78                    //はみ出してる文字数+4文字をテキストの後ろから削除
79                    value.innerHTML = value.innerHTML.slice(0, capacity(value) - count - 4);
80
81                    //「…」と連結し、元のテキストを置き換える
82                    value.innerHTML = value.innerHTML + "…";
83                }
84            });
85        });
86    </script>
87</head>
88<body>
89    <div class="sample1">
90		<div class="style1">エスケープされた &lt; &gt; &amp; などの文字の扱いはどうなる？</div>
91        <div class="style1">Proportional Font WWWWWWWWWWW iiiiiiii のように文字幅が異なるフォント</div>
92        <div class="style1">サロゲートペア 𠀋 𡈽 𠮟 などはどのようになるか？</div>
93        <div class="style1">絵文字 🍎 🍏 👨‍🌾 などはどのようになるか？</div>        
94	</div>
95
96    <br />
97
98    <div class="sample1">
99		<div class="style2">エスケープされた &lt; &gt; &amp; などの文字の扱いはどうなる？</div>
100        <div class="style2">Proportional Font WWWWWWWWWWW iiiiiiii のように文字幅が異なるフォント</div>
101        <div class="style2">サロゲートペア 𠀋 𡈽 𠮟 などはどのようになるか？</div>
102        <div class="style2">絵文字 🍎 🍏 👨‍🌾 などはどのようになるか？</div>
103        
104	</div>
105</body>
106</html>

結果は以下のようになります。上が CSS の text-overflow:ellipsis での処理、下が質問者さんが書いた JavaScript での処理です。ブラウザは Chrome 113.0.5672.93、フォントは 16px Meiryo です。

イメージ説明

該当テキストでは現状絵文字と記号は使ってない

・・・とのことですので絵文字の結果は関係ない、< > & などの文字は length では 1 文字としてカウントされるので問題ないと思いますが、プロポーショナルフォントやサロゲートペアはどうでしょう？

問題は質問のコードの、

//ボックスに収納できる文字数
var mojisuu = Math.floor(width/fontsize);

/対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数/
function textcount(n) {
...
for (i = 0; i < n.length; i++) {

・・・のあたりから来ているようですが、そこを改善して何とかするというのは JavaScript では無理っぽい気がします。

CSS の text-overflow:ellipsis と JavaScript を組み合わせて何とかなりそうな気がします。が、質問者さんのやりたいことが下のコメント欄の説明を見ても分かりませんので、気がするだけですけど。

投稿2023/05/08 01:10

編集2023/05/09 03:51

退会済みユーザー

総合スコア0

回答へのコメント

ponta9001

2023/05/08 07:42

返事が遅れてすみません。返事がないなか質問と回答頂きありがとうございます。自分でも試行錯誤するなかでtext-overflow:ellipsisを使う場合2つ課題が発生したためjsを使うことにしました。 1つはSurferOnWwwさんの書いて頂いた例でいうstyle1の2つの子要素はどちらもinline-block要素で1行にしたい→かつspanで囲ってるほうは省略させたくないのでwidthの指定はしない→span要素の長さ分だけdiv要素の長さを省略させる方法が分からなかったという点です。正直自分は初心者のほうなのでもし知識足らずでおかしなことを言っていたら申し訳ありません。もう1つの問題は、実は実際に作成しようとしてるものは <div class="sample1"> <div class="style1"> <div>あいうえお</div> <span>かきくけこ</span> </div> <span>このテキストは省略しない</span> </div> という構成で、sample1にtext-overflow:ellipsisを使用すると1文字ずつ「...」に省略されるのではなく丸々省略されてしまった点です。 cssだけで実装できたら嬉しかったのですが自分では方法が分からずjsに頼りました。

退会済みユーザー

2023/05/09 03:05

上の質問者さんのコメントの説明では何をしたいのかよくわかりませんが、何にせよ、質問に書かれた JavaScript のコードではプロポーショナルフォントやサロゲートペアへの対応が考えられてないところに問題があるのではないですか？　あとで、どういう問題がありそうか回答欄に追記しておきます。

自己解決

たくさんのご回答ありがとうございました！
querySelectorAll()とforEach()を使う方針で正しいというコメントを頂いた後、自分で書き直したコードで期待通りの動作をしたため自己解決とさせていただきます。

以下変更後のコードです。(73行目までは同じです)

動作

ページ内にある同じclass要素のテキストの文字数をカウントし、はみ出してる(1行収めたいけど2行になる)部分をそれぞれ「...」で表示するプログラムです。

自分の場合テキストの途中を省略させたかったので、テキストの末尾を「...」に変更したい場合は下記コード85行目の「value.firstElementChild.innerHTML」を「value.innerHTML」に変更させてください。

注意

このプログラムではコメント頂いた複数の問題点解消できておらず、以下のテキストを含む場合は文字数のカウントに誤差が発生し理想通りに省略されない場合があります。
・絵文字
・記号
・特殊文字
・プロポーショナルフォント
・サロゲートペア......等々

全角(幅が高さと同じ)と半角(幅が高さの1/2)で構成されたテキストの場合は期待通りの動作をすると思います。

html
1
2<style type="text/css">
3		.sample {
4			width: 80%;
5			font-size: 14px;
6			border-style: solid;
7			margin-top: 30px;
8		}
9
10		.sample * {
11			display: inline-block;
12		}
13
14		.sample div {
15			background-color: yellow;
16		}
17
18		.sample span {
19			background-color: pink;
20		}
21</style>
22<body>
23	<div class="sample">
24		<div>.sampleに何文字ならキレイに収まるか調べて、</div>
25		<span>文字数が多い場合.sample > div部分を省略して表示させる</span>
26	</div>
27	<div class="sample">
28		<div>実現させたいのはページ内にあるすべての</div>
29		<span>.sample > divに同じ処理をさせたい</span>
30	</div>
31<script type="text/javascript">
32/*全角で最大何文字ならキレイに収まるかを調べる関数*/
33function capacity(s) {
34
35	//算出されたCSSを取得
36	var style = window.getComputedStyle(s);
37
38	//フォントサイズとボックスの幅を数値で取得
39	var fontsize = parseInt(style.fontSize);
40	var width = parseInt(style.width);
41
42	//ボックスに収納できる文字数
43	var mojisuu = Math.floor(width/fontsize);
44
45	return mojisuu;
46};
47
48
49/*対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数*/
50function textcount(n) {
51
52	var nagasa = 0;
53
54	for (i = 0; i < n.length; i++) {
55
56		if(n[i].match(/[ -~]/) ) {
57
58			nagasa += 0.5;
59		}
60
61		else {
62
63			nagasa += 1;
64		}
65
66
67	}
68
69	return nagasa;
70
71};
72
73
74var sample = document.querySelector(".sample");
75var sampleall = document.querySelectorAll(".sample");
76
77
78sampleall.forEach(function(value){
79
80	var count = textcount(value.innerText);
81
82	if (count > capacity(value)) {
83
84		//はみ出してる文字数+4文字をテキストの後ろから削除
85		value.firstElementChild.innerHTML = value.firstElementChild.innerHTML.slice( 0, capacity(value) - count -4 ) + "…"; 
86	}
87	//要素の幅が十分にあればそのまま表示
88});
89</script>
90</body>```

投稿2023/05/11 14:13

ponta9001

総合スコア2

「spanの方は省略させたくない」という記述がありましたが、仕様がよくわかりません。もう少しきっちり命題で説明したほうが良いと思います。上記単純に反映させる（divは...で省略、spanは溢れたら隠すだけ）ならこんな感じ

CSS
1<style>
2.sample {
3  width: 10%; /*文字が隠れるよう適当な長さで調整*/
4  font-size: 14px;
5  border-style: solid;
6  margin-top: 30px;
7  overflow:hidden;
8}
9.sample > * {
10  max-width: 100%;
11  white-space:nowrap;
12  overflow:hidden;
13  text-overflow:ellipsis;
14}
15</style>
16<div class="sample">
17<div>.sampleに何文字ならキレイに収まるか調べて、</div>
18<span>文字数が多い場合.sample > div部分を省略して表示させる</span>
19<div>test</div>
20</div>
21<div class="sample">
22<div>実現させたいのはページ内にあるすべての</div>
23<span>.sample > divに同じ処理をさせたい</span>
24<span>test</span>
25</div>