今回はJavaScriptで文字列の空白を削除する簡単な方法を紹介します。
「空白の削除」といっても文中にある空白は「意図して残したい」ことが多いと思いますので、主に両端にある「不要な空白」を削除することに絞って解説します。
「ユーザーが誤入力した空白を自動で削除したい」
「バックエンドのプログラムは使えないのでJavaScriptで解決したい」
「エクセルで集計するときに空白があることで正しくグラフや表が作成できない」
今回の内容はそんな方にピッタリの内容です。
またWeb制作などに限らずVBA、GASなど業務効率化におけるプログラムでも頻出の内容です。
例題は簡単かもしれませんが意外と登場機会は多いので練習しておきましょう。
動画もあるので必要に応じて活用してください。
JavaScriptで文字の両端を削除する方法
結論、以下のようにすることで実現できます。
const targetString1 = " こんにちは ";
console.log(targetString1); // 「 こんにちは 」
const trimmedString1 = targetString1.trim();
console.log(trimmedString1); // 「こんにちは」JavaScriptには「trim」という関数が用意されていて、こちらを使うことで対象の文字列の両端にある空白を削除してくれます。
こちら文中にある空白は残してくれるので安心です。
const targetString2 = " 田中 太郎 ";
console.log(targetString2); // 「 田中 太郎 」
const trimmedString2 = targetString2.trim();
console.log(trimmedString2); // 「田中 太郎」また最後に改行が含まれている場合にも削除してくれます。
const targetString3 = '今日は晴れです。\n\n';
console.log(targetString3); // 「今日は晴れです。\n\n」
const trimmedString3 = targetString3.trim();
console.log(trimmedString3); // 「今日は晴れです。」基本的に入力内容が改行されていて困ることは少ないですが、エクセルに集計するときには改行を削除する場面があります。
「trim」だけ覚えておけば結構な事例を解決できますね。
trimはテキストの先頭、文末の空白を削除してくれるのですが、「先頭だけ」のようなことをしたい場合は専用のメソッドがあります。
テキストの先頭だけ空白削除したいときはtrimStartを使います。
let text2 = " こんにちは ";
let text2 = text1.trimStart(); // 「こんにちは 」テキストの文末だけ空白削除したいときはtrimEndを使います。
let text2 = " こんにちは ";
let text2 = text1.trimEnd(); // 「 こんにちは」ちなみにですがブラウザにテキストを表示させる場合はtrimを使わなくても大丈夫です。
というのも最近のブラウザは自動で不要な空白を削除してくれるのです。
例えばHTML、JSで以下のようなコードがあったとします。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container"></div>
<div class="wrapper"></div>
</body>
</html>let text1 = " こんにちは ";
let text2 = text1.trim();
const container = document.querySelector(".container");
container.innerHTML = text1; // こちらは何もしていない
const wrapper = document.querySelector(".wrapper");
wrapper.innerHTML = text2; // こちらはtrimを実装した
検証ツールで確認するとtrimの有無の差がわかるのですが、実際の画面上では全く同じ見た目になっていますね。
今回の趣旨としては便利な機能なのですが、「空白は消さないでほしい」という場面もあるかと思います。
HTMLでは特殊記号というものを使うことで空白を表示させることができます。
// ここを修正
let text1 = " こんにちは";
// ここを修正
let text2 = "こんにちは";
const container = document.querySelector(".container");
container.innerHTML = text1;
const wrapper = document.querySelector(".wrapper");
wrapper.innerHTML = text2;
HTMLの世界では「” “」と「” ”」は明確に違う言葉として認識するようになっていて、「” ”」は空白をそのまま表示させることになります。
逆に「” “」とは違うため「” ”」に対してはtrimは効きませんので注意してください。
コメント
Comments are closed.