在 JavaScript 中用下劃線替換空格？

讓我們學習“如何在 JavaScript 中用下劃線替換空格”。這是一種對包含多個單詞的字串進行格式化的有用技術，可用於許多不同的情況。

我們還將研究一些實現相同結果的其他方法，以及在 JavaScript 程式碼中使用下劃線時應注意的潛在陷阱。

JavaScript 是一種用於為網站建立吸引人且引人入勝的網頁的指令碼語言。有時確實需要將特定字母替換為某些字元或文字中的額外空格。下面列出了可用於將空格替換為下劃線的預定義 JavaScript 方法。

  • replace() 方法

  • replaceAll() 方法

  • split() 方法

使用 replace() 方法

replace() 方法在字串中查詢值或正則表示式。包含替換值的新字串是 replace() 方法的結果。replace() 方法不會更改原始字串。

語法

以下是 replace() 的語法：

replace(pattern, replacement)

示例

在下面的示例中，我們正在執行包含 replace() 方法的指令碼以將空格替換為下劃線。

<!DOCTYPE html>
<html>
<body>
   <script>
      function spacereplace() {
         var key=$("#sentence").val();
         key=key.replace(/ /g,"_");
         $("#url_key").val(key);
      }
      let sentence = "w e l c o m e t o T P";
      document.write("The Given Sentence=")
      document.write(sentence +"<br>");
      document.write("After replacing the spaces=")
      document.write(sentence.replace(/ /g,"_"));
   </script>
</body>
</html>

執行指令碼時，它將生成一個輸出，其中包含帶有空格的原始句子，以及一個更新後的句子，在其中我們可以看到由於指令碼執行時發生的事件，句子已替換為下劃線。

示例

考慮以下示例，我們使用 replace() 方法將空格替換為下劃線。

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <p id = "tutorial"></p>
   <button onclick = "replacespace()">
      Click here
   </button>
   <p id = "tutorial1"></p>
   <script>
      var re_up = document.getElementById("tutorial");
      var re_down = document.getElementById("tutorial1");
      var str = "T H E B E S T E W A Y L E A R N I N G";
      re_up.innerHTML = str;
      function replacespace() {
         re_down.innerHTML = str.replace(/ /g, "_");
      }
   </script>
</body>
</html>

執行上述指令碼後，網頁瀏覽器將顯示句子以及網頁上的一個單擊按鈕。當用戶單擊按鈕時，事件被觸發，它將句子中的所有空格替換為下劃線並顯示它。

使用 replaceAll() 方法

replaceAll() 方法返回一個新的 string，其中包含所有模式匹配的替換項。字串或 RegExp 可用作模式，並且可為每個匹配項呼叫一個函式作為替換項。初始 string 保持不變。

語法

以下是 replaceAll() 的語法：

replaceAll(pattern, replacement)

示例

在下面的示例中，我們使用 replaceAll() 方法，該方法被觸發並將空格替換為下劃線。

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <script>
      function updateKey()
      {
         var key=$("#sentence").val();
         key=key.replaceAll(/ /g,"_");
         $("#url_key").val(key);
      }
      let sentence = "T UTORIALS POINT C OME WITH LOT";
      document.write(sentence.replaceAll(/ /g,"_"));
   </script>
</body>
</html>

指令碼執行後，事件被觸發並在網頁上顯示將空格替換為下劃線的句子。

使用 split() 方法

split() 方法透過搜尋模式將字串劃分為有序的子字串列表；然後將這些子字串放入陣列中，然後返回該陣列。

語法

以下是 split() 的語法：

split()
split(separator)
split(separator, limit)

示例

讓我們考慮以下示例，我們使用 split() 方法。首先，它將使用空格分割 string，然後將空格替換為下劃線。

<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
   <p id = "tutorial"></p>
   <p id = "tutorial1" ></p>
   <button onclick = "spacereplace()">
      REPLACE
   </button>
   <script>
      var re_up = document.getElementById("tutorial");
      var re_down = document.getElementById("tutorial1");
      var str = "H E L L O , W E L COME";
      re_up.innerHTML = str;
      function spacereplace() {
         re_down.innerHTML = str.split(' ').join('_');
      }
   </script>
</body>
</html>

執行上述指令碼後，它將生成一個輸出，其中包含一個句子和一個單擊按鈕。當用戶單擊按鈕時，會觸發一個事件，將句子中的所有空格替換為網頁上的下劃線。

更新於：2023年1月18日

3K+ 次檢視

啟動您的職業生涯

完成課程獲得認證

開始
廣告