今回はJavaScriptでn文字目以降の文章を切り取る方法を紹介します。
＜サンプルコード＞
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<style>
* {
margin: 0;
padding: 0;
}
.content__area {
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #efefef;
}
.content__text {
width: 96%;
margin: 0 auto;
}
button {
margin-top: 30px;
margin-left: 40px;
background-color: #9f9f9f;
}
</style>
</head>
<body>
<div class="content__area">
<p class="content__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecatttvl cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button onclick="btn_press();">全文表示</button>
</div>
<script>
// 要素の読み込み
var text_load = document.querySelector('.content__text');
var btn_load = document.querySelector('button');
// 要素内文字の抽出・保存
var text_read = text_load.textContent;
var text_save = text_read;
// 文字の切り取り
if (text_read.length >= 200) {
var text_cut = text_read.substring(0, 200) + "...";
text_load.innerHTML = text_cut;
};
// 文字の再表示
function btn_press() {
var text_read_re = document.querySelector('.content__text').textContent;
if (text_save !== text_read_re) {
text_load.innerHTML = text_save;
btn_load.innerHTML = "閉じる";
} else {
text_load.innerHTML = text_cut;
btn_load.innerHTML = "全文表示";
};
};
</script>
</body>
</html>CSS部分は見た目を整えているだけなので解説は特にありません。
<HTML>
<p class="content__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint
occaecatttvl cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button onclick="btn_press();">全文表示</button>.content__textと<button>はJavaScriptで読み込み、
<button onclick="btn_press();">全文表示</button><button>がクリックされるとbtn_press();という関数が実行されます。
<JavaScript>
<script>
// 要素の読み込み
var text_load = document.querySelector('.content__text');
var btn_load = document.querySelector('button');
// 要素内文字の抽出・保存
var text_read = text_load.textContent;
var text_save = text_read;
// 文字の切り取り
if (text_read.length >= 200) {
var text_cut = text_read.substring(0, 200) + "...";
text_load.innerHTML = text_cut;
};
// 文字の再表示
function btn_press() {
var text_read_re = document.querySelector('.content__text').textContent;
if (text_save !== text_read_re) {
text_load.innerHTML = text_save;
btn_load.innerHTML = "閉じる";
} else {
text_load.innerHTML = text_cut;
btn_load.innerHTML = "全文表示";
};
};
</script>細かく解説します。
// 要素の読み込み
var text_load = document.querySelector('.content__text');
var btn_load = document.querySelector('button');
この部分で.content__textと<button>の情報が全て読み込まれます。
// 要素内文字の抽出・保存
var text_read = text_load.textContent;
var text_save = text_read;2行目の部分で.content__textのtextContent（文章の情報）のみを抽出するようにします。
3行目でtext_saveに文章を代入しておきます。この記述を行うことで元の文章と編集された文書の比較が出来るようになります。
// 文字の切り取り
if (text_read.length >= 200) {
var text_cut = text_read.substring(0, 200) + "...";
text_load.innerHTML = text_cut;
};if文で元の文章の文字数が100文字以上だった場合の処理を記述します。今回の場合は、100文字以上だったら200文字目以降の文章を切り取り”…”を文末に挿入します。
// Sample
var text_cut = text_read.substring(x, y) + "...";substringの範囲指定の記述は「x文字目から数えてy文字目以降」です。
こうして編集した文章を.content__textにinnerHTMLします。
function btn_press() {
var text_read_re = document.querySelector('.content__text').textContent;
if (text_save !== text_read_re) {
text_load.innerHTML = text_save;
btn_load.innerHTML = "閉じる";
} else {
text_load.innerHTML = text_cut;
btn_load.innerHTML = "全文表示";
};
};html部分で呼び出されるbtn_press();の内容を記述します。text_read_reで現在ブラウザに表示されている文章を読み込みます。
if文で「もし編集前の文章とブラウザに現在表示されている文章が同じでなかったのなら」という条件を設定し、条件に該当すると元の文章を表示し<button>のテキストを変更します。
こうすることで元の文章が表示されます。
} else {
text_load.innerHTML = text_cut;
btn_load.innerHTML = "全文表示";
};
};もし条件に当てはまらなかったなら、編集後の文章を表示させます。
（こちら側は編集前の文章が表示されている時のみに実行されます。）
以上で解説を終わります。ありがとうございました。