JavaScript で文字列からスペースを削除する
Kirill Ibrahim
2023年10月12日
-
ホワイトスペースのみを置換するには
replace()を使用する -
すべての空白のみを置換するには
replace()を使用する -
JavaScript で文字列から空白を削除するには
split()とjoin()メソッドを使用する
この記事では、文字列からスペースを削除する様々な方法、特にタブや改行を削除する方法を紹介します。以下の各メソッドにはコード例がありますので、あなたのマシンで実行してみてください。
replace() メソッドは指定された値や正規表現を受け取り、指定された文字列の中でそれらを置換します。指定した値が置換された新しい文字列を返します。
ホワイトスペースのみを置換するには replace() を使用する
string.replace(/ /g, '')
正規表現には、空白文字 (" ") とグローバルプロパティが含まれます。これは、2 番目のパラメータで与えられたように、文字列内のすべてのスペースを検索し、空の文字列に置き換えます。
例
<!DOCTYPE html>
<html>
<head>
<title>
Remove spaces from a string using JavaScript
</title>
</head>
<body>
<h2>
Remove spaces from a string using JavaScript
</h2>
<p>
Original string is:
site/ delft stack .com/
</p>
<p>
New Sentence is:
<span class="outputString"></span>
</p>
<button onclick="removeSpacesFromString()">
Clean Spaces
</button>
<script type="text/javascript">
const removeSpacesFromString = () => {
let text1 =
"site/ delft stack .com/";
let text2 =
text1.replace(/ /g, "");
document.querySelector('.outputString').textContent
= text2;
}
</script>
</body>
</html>
出力：
すべての空白のみを置換するには replace() を使用する
string.replace(/\s+/g, '')
正規表現パターン \s は、スペース、タブ、改行などの空白記号を指します。
例
<script type="text/javascript">
const removeSpacesFromString = () => {
let text1 =
"site/ delft stack .com/";
let text2 =
text1.replace(/\s+/g, '');
document.querySelector('.outputString').textContent
= text2;
}
</script>
JavaScript で文字列から空白を削除するには split() と join() メソッドを使用する
split() メソッドは文字列を配列に分割し、新しい配列を返します。
join() メソッドは配列のすべての要素を連結して新しい文字列を返します。
ここでは、split メソッドを用いて文字列を空白文字 " " を区切り文字として配列に分割し、join メソッドを用いて配列を文字列に変換します。これら 2つのメソッドを用いて空白を削除します。
例：
<html>
<head>
<title>
Remove spaces from a string using JavaScript
</title>
</head>
<body>
<h2>
Remove spaces from a string using JavaScript
</h2>
<p>
Original string is:
site/ delft stack .com/
</p>
<p>
New Sentence is:
<span class="outputString"></span>
</p>
<button onclick="removeSpacesFromString()">
Clean Spaces
</button>
<script type="text/javascript">
const removeSpacesFromString = () => {
let text1 =
"site/ delft stack .com/";
let text2 =
text1.split(" ").join("");
document.querySelector('.outputString').textContent
= text2;
}
</script>
</body>
</html>