jQueryの.trimの使い方とサンプルコード
10 回閲覧されました
みなさんこんにちは、jonioです。
今回はjQueryの.trimメソッドの使い方のメモになります。
.trimメソッドとは
テキストの前後にある半角・全角の余白を削除できます。
コードの書き方
下記になります。
$.trim(変数);サンプルコード
下記のサンプルコードで考えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .trim() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>jQuery .trim() の例</h2>
<label for="inputText">余白付きのテキストを入力してください:</label>
<input type="text" id="inputText" value=" 余白があるテキスト ">
<button id="trimButton">余白を削除</button>
<p id="beforeTrim" class="background-color">処理前のテキスト:</p>
<p id="afterTrim" class="background-color">処理後のテキスト:</p>
<script>
$(document).ready(function() {
$('#trimButton').click(function() {
// 入力されたテキスト（余白付き）
var originalText = $('#inputText').val();
$('#beforeTrim').text('処理前のテキスト: [' + originalText + ']');
// .trim()を使って余白を削除
var trimmedText = $.trim(originalText);
$('#afterTrim').text('処理後のテキスト: [' + trimmedText + ']');
});
});
</script>
</body>
</html>適当にhtmlファイルを作成して動作確認すると挙動が分かりやすいです。
フォームに値を入れると.trimを使った時とそうでない時で違いが分かります。
.trimを使うと「余白があるテキスト」の前後の余白がなくなっているのが確認できます。