在 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+ 次查看

启动您的职业生涯

完成课程获得认证

开始
广告