七爪源碼：如何在 JavaScript 中的字符串字符之間添加空格

解如何在 JavaScript 中輕松地在字符串的字符之間添加空格。

在本文中，我們將學習如何在 JavaScript 中輕松地在字符串的字符之間包含空格。

1. String split() 和 Split join() 方法

要在字符串的字符之間添加空格，請在字符串上調用 split() 方法以獲取字符數組，然后在數組上調用 join() 方法以使用空格分隔符連接字符。

例如：

function addSpace(str) {
  return str.split('').join(' ');
}const str1 = 'coffee';
const str2 = 'banana';console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a

String split() 方法使用指定的分隔符將字符串拆分為子字符串數組。

const str1 = 'coffee,milk,tea';
const str2 = 'sun-moon-star';console.log(str1.split(',')); // [ 'coffee', 'milk', 'tea' ]
console.log(str2.split('-')); // [ 'sun', 'moon', 'star' ]

通過使用空字符串 ('') 作為分隔符，我們將所有字符串字符拆分為單獨的數組元素。

const str1 = 'coffee';
const str2 = 'banana';// Passing an empty string ('') to the split method// [ 'c', 'o', 'f', 'f', 'e', 'e' ]
console.log(str1.split(''));// [ 'b', 'a', 'n', 'a', 'n', 'a' ]
console.log(str2.split(''));

String join() 方法將數組中的每個字符串與分隔符組合在一起。它返回一個包含連接數組元素的新字符串。

const arr = ['a', 'b', 'c', 'd'];console.log(arr.join(' ')); // a b c d
console.log(arr.join('-')); // a-b-c-d
console.log(arr.join('/')); // a/b/c/d

因此，將空格字符傳遞給 join() 會在結果串聯中用空格分隔字符。

在某些情況下，字符串已經在某些字符之間包含空格。在這種情況下，我們的方法會在字符之間添加更多空格。

function addSpace(str) {
  return str.split('').join(' ');
}// These strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';console.log(addSpace(str1)); // c o     f f e e
console.log(addSpace(str2)); // b a n a     n a

這是因為空格 (' ') 也是一個字符，就像一個字母，調用 split() 會使其成為數組中的一個單獨元素，該元素將與其他空格組合。

// These strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';// The space characters are separate elements of the
// array from split()
/**
 * [
  'c', 'o', ' ',
  ' ', 'f', 'f',
  'e', 'e'
]
 */
console.log(str1.split(''));/**
 * [
  'b', 'a', 'n',
  'a', ' ', ' ',
  'n', 'a'
]
 */
console.log(str2.split(''));

如果我們想避免字符的多個間距，我們可以在 split() 和 join() 之間插入對 filter() 方法的調用。

function addSpace(str) {
  return str
    .split('')
    .filter((item) => item.trim())
    .join(' ');
}// The strings have spaces between some characters
const str1 = 'co  ffee';
const str2 = 'bana  na';console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a

Array filter() 方法返回一個新數組，該數組僅包含原始數組中的元素，傳遞給 filter() 的測試回調函數為其返回真值。對空格 (' ') 調用 trim() 會產生一個空字符串 ('')，這在 JavaScript 中不是真值。因此，從 filter() 返回的結果數組中排除了空格。

小費

在 JavaScript 中，只有六個假值：false、null、undefined、0、''（空字符串）和 NaN。其他所有值都是真實的。

2. for...of 循環

對于更命令式的方法，我們可以使用 JavaScript for...of 循環在字符串的字符之間添加一個空格。

function addSpace(str) {
  // Create a variable to store the eventual result
  let result = '';  for (const char of str) {
    // On each iteration, add the character and a space
    // to the variable
    result += char + ' ';
  }  // Remove the space from the last character
  return result.trimEnd();
}const str1 = 'coffee';
const str2 = 'banana';console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a

為了處理前面討論的場景，其中字符串在某些字符之間有空格，請在每次迭代的字符上調用 trim()，并添加一個 if 檢查以確保它是真實的，然后將它和空格添加到累積結果中：

function addSpace(str) {
  // Create a variable to store the eventual result
  let result = '';  for (const char of str) {
    // On each iteration, add the character and a space
    // to the variable    // If the character is a space, trim it to an empty
    // string, then only add it if it is truthy
    if (char.trim()) {
      result += char + ' ';
    }
  }  // Remove the space from the last character
  return result.trimEnd();
}const str1 = 'co  ffee';
const str2 = 'bana  na';console.log(addSpace(str1)); // c o f f e e
console.log(addSpace(str2)); // b a n a n a

關注七爪網，獲取更多APP/小程序/網站源碼資源！

.字符串replaceAll()方法

要在 JavaScript 中從字符串中刪除所有空格，請在字符串上調用 replaceAll() 方法，將包含空格的字符串作為第一個參數傳遞，將空字符串 ('') 作為第二個參數傳遞。例如， str.replaceAll(' ', '') 從 str 中刪除所有空格。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC

String replaceAll() 方法返回一個新字符串，其中模式的所有匹配項都被替換替換。第一個參數是要匹配的模式，第二個參數是替換。因此，將空字符串作為第二個參數傳遞會用空替換所有空格，從而將它們刪除。

筆記

JavaScript 中的字符串是不可變的，replaceAll() 返回一個新字符串而不修改原始字符串。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC// Original not modified
console.log(str); // A B C

2.字符串replace()方法和正則表達式

或者，我們可以通過調用字符串的 replace() 方法從字符串中刪除所有空格，將匹配任何空格的正則表達式作為第一個參數傳遞，并將空字符串 ('') 作為第二個參數。

const str = 'A B C';
const allSpacesRemoved = str.replace(/ /g, '');console.log(allSpacesRemoved); // ABC

我們使用 g 正則表達式標志來指定字符串中的所有空格都應該匹配。如果沒有這個標志，只有第一個空格會被匹配和替換：

const str = 'A B C';// No 'g' flag in regex
const spacesRemoved = str.replace(/ /, '');// Only first space removed
console.log(spacesRemoved); // AB C

String replace() 方法返回一個新字符串，其中所有匹配項都替換為傳遞給它的第二個參數。我們傳遞一個空字符串作為第二個參數，以將所有空格替換為空，從而將它們刪除。

筆記

與 replaceAll() 一樣，replace() 返回一個新字符串而不修改原始字符串。

const str = 'A B C';
const spacesRemoved = str.replace(/ /g, '');console.log(spacesRemoved); // ABC// Original not modified
console.log(str); // A B C

小費

我們指定的正則表達式只匹配字符串中的空格。要匹配和刪除所有空白字符（空格、制表符和換行符），我們必須使用不同的正則表達式：

const str = 'A B C \t D \n E';
const whitespaceRemoved = str.replace(/\s/g, '');console.log(whitespaceRemoved); // ABC

關注七爪網，獲取更多APP/小程序/網站源碼資源！

語

本篇文章主要給大家介紹PHP如何將post提交過來的數據進行空格過濾。

大家應該都知道，我們在開發登錄界面時，除了前臺的一些js驗證，還有一些提交數據到后臺后的驗證。下面我就通過簡單的代碼示例，給大家介紹php后臺過濾數據空格驗證的方法。

1、login.html代碼示例

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>登錄</title>
 <style type="text/css">
 body {
 background: url(images/bg.png);
 }
 
 .login {
 width: 370px;
 margin: 100px auto 0px;
 text-align: center;
 }
 
 #username{
 width: 360px;
 height: 50px;
 border: none;
 background: #fff;
 border-radius: 10px;
 margin: 5px auto;
 padding-left: 10px;
 color: #745A74;
 font-size: 15px;
 }
 
 #password{
 width: 360px;
 height: 50px;
 border: none;
 background: #fff;
 border-radius: 10px;
 margin: 5px auto;
 padding-left: 10px;
 color: #745A74;
 font-size: 15px;
 }
 
 .botton {
 width: 130px;
 height: 40px;
 background: #745A74;
 border-radius: 10px;
 text-align: center;
 color: #fff;
 margin-top: 30px;
 line-height: 40px;
 }
 </style>
</head>
<body>
<div class="login">
 <form action="check1.php" method="post">
 <img src="images/header.png"><br>
 <input type="text" id="username" name="username" placeholder="請輸入用戶名！" value=""><br>
 <input type="password" id="password" name="password" placeholder="請輸入密碼！" value=""><br>
 <input type="submit" class="botton" onclick="add()" value="login">
 </form>
</div>
</body>
</html>

這里的form表單主要是通過post方式提交數據到check1.php中。

2、check1.php代碼示例

<?php
$arr = ['admin'];
 
 
if (in_array(trim($_POST['username']),$arr)){
 echo "登錄成功！";
}else{
 echo "用戶名不存在！";
}
var_dump($_POST['username']);
var_dump(trim($_POST['username']));

前臺登錄界面效果如下圖：

如果我們將上述check1.php代碼中trim函數刪除掉。

注：trim() 函數表示移除字符串兩側的空白字符或其他預定義字符。

那么當我們輸入帶空格的用戶名，結果就如下圖：

如圖顯示用戶名不存在，這是由于我們后臺沒有進行過濾數據空格的操作。

當我們按照上述check1.php的完整代碼來處理提交過來的數據，那么即使是帶有空格的用戶名，都會顯示登錄成功。

效果如下：

如圖我們成功過濾了用戶名前后的空格。

其實在我們日常登錄各種后臺的過程中，想必有一部分朋友都習慣在輸入用戶名或者密碼時隨手加空格。那么大家可以根據自身項目的需求，來決定是否需要進行過濾空格的操作。

本篇文章就是關于PHP將post提交過來的數據進行空格過濾的方法介紹，通俗易懂，希望對需要的朋友有所幫助！

注：本文轉載來自PHP中文網，版權有PHP中文網獨有，轉載需注明出處，謝謝。

在線咨詢

上一篇：僅使用 01 提示使用 ChatGPT 代碼解釋器進行網頁抓?。ǚ植浇坛蹋?/a>
下一篇：html基本標簽分類記憶（三）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

七爪源碼：如何在 JavaScript 中的字符串字符之間添加空格

語

1、login.html代碼示例

2、check1.php代碼示例

您的項目需求

1、login.html代碼示例

2、check1.php代碼示例