テキストの両端にある空白を、JavaScriptの .trim() メソッドを使って削除します。
簡単なコードと内容ですが、参考にしてみてください。
目次
.trim()
JavaScriptの .trim() は、文字列の両端の空白を削除するメソッドです。
const after = customTextIneer.trim();「文字列の両端の空白」という部分が重要で、スペースやタブもこの空白に含まれます。
テキストの空白を削除したサンプル
早速サンプルです。
以下に「空白のあるテキスト」と「空白を削除したテキスト」の2種類の文字列がありますが、そのかぶの「空白を削除」ボタンをクリックすると、「空白を削除したテキスト」の両端の空白が削除されます。
空白のあるテキスト
空白を削除したテキスト
ボタンを押す前（「空白」が削除される前）のコード
サンプルでは「空白を削除」と表示されたボタンをクリックすることで「改行・空白」が削除された状態になります。
実際にボタンを押す前のコードは以下の通りです。
<p id="defaultText"> 空白のあるテキスト </p>
<p id="customText"> 空白を削除したテキスト </p>ボタンを押した後（「空白」を削除した後）のコード
実際にボタンを押した後、以下のようなHTMLのコードになります。
<p id="defaultText"> 空白のあるテキスト </p>
<p id="customText">空白を削除したテキスト</p>
2行目の p タグの空白が全て削除されます。
実装の手順と方法
それぞれのコードの解説の前に、実装の手順と方法について簡単にご説明します。
コピペしてそのまま使うコードじゃないと思いますが、コピペの場合の手順についても解説しておきます。
はじめに、設置したい場所へHTMLを記述します。この記事のHTMLは以下の通りです。
<p id="defaultText"> 空白のあるテキスト </p>
<p id="customText"> 空白を削除したテキスト </p>次に、JavaScriptのコードをページに記述します。これは、Swiperの動き方を指定するオプションです。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
const customText = document.getElementById('customText');
const customTextIneer = customText.innerHTML;
console.log(customTextIneer);
const after = customTextIneer.trim();
console.log(after);
customText.innerHTML = after;ざっくりとしたコードの解説
コードは、HTML・JavaScriptの2種です。見た目を整える部分はないので、CSSは割愛して順に解説していきます。
HTML
HTMLは、p タグ中に文字列が並ぶ構造で、それぞれの文字列の両端に空白を入れています。
<p id="defaultText"> 空白のあるテキスト </p>
<p id="customText"> 空白を削除したテキスト </p>サンプルでは、2列目の「空白を削除したテキスト」の空白がボタンクリックで削除されます。
JavaScript
この記事のJavaScriptは、ざっくりいうと「文字列を取得→空白を削除→空白を削除した文字列を戻す」流れで、コード自体もシンプルな構造です。
const customText = document.getElementById('customText'); // 空白を削除するidの指定
const customTextIneer = customText.innerHTML; // 取得したidの中の文字列を取得
console.log(customTextIneer); // 文字列をコンソールに表示
const after = customTextIneer.trim(); // 文字列両端にある空白の削除
console.log(after); // 空白を削除した文字列をコンソールに表示
customText.innerHTML = after; // 空白を削除した文字列を指定idの中に戻す複数要素の文字列の空白を削除して表示させるには、ループを使えばOKです。
さいごに
単品で使うコードではありませんが、応用して使ってみてください。
