首页 > 网络编程 > JavaScript > javascript技巧 > JS字符串处理trim()和replace()

JavaScript字符串处理之trim()和replace()详解

2024-10-26 10:23:56 作者：前端开发博客

这篇文章主要给大家介绍了关于JavaScript字符串处理之trim()和replace()的相关资料,文中介绍的所有这些方法都不会修改原始字符串,而是返回一个新的字符串,需要的朋友可以参考下

前言

字符串操作是编程的基础技能。在 JavaScript 中，你经常需要处理字符串，其中一项常见任务就是修剪字符。修剪指的是移除字符串开头和/或结尾的特定字符，例如空格、制表符、换行符或逗号。

你可能还想移除程序中不需要的特定字符，并用其他字符替换它们。

本文将介绍一些在 JavaScript 中修剪和移除字符串字符的方法。

使用 trim() 方法移除空格

trim() 方法是 JavaScript 内置的，可以直接用于移除字符串开头和结尾的空格。

trim() 方法的语法很简单：

string.trim()

直接对需要修剪的字符串调用 trim() 方法即可。这个方法会移除字符串开头和结尾的所有空格，包括空格、制表符和换行符。

需要注意的是，trim() 方法不会修改原始字符串，而是返回一个新的字符串，其中开头和结尾的空格已被移除。

举个例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trim();
console.log(trimmedGreeting); // 输出: "Hello World"

在这个例子中，我们声明了一个名为 greeting 的变量，并赋值为字符串 Hello World，字符串的开头和结尾都有空格。

为了移除这些空格，我们调用了 greeting 变量的 trim() 方法，并将结果存储在一个新的变量 trimmedGreeting 中。

当我们使用 console.log() 将新字符串打印到控制台时，开头和结尾的空格已经不见了。

而原始字符串 greeting 仍然包含开头和结尾的空格。

使用 trimStart() 方法移除开头空格

如果只想移除字符串开头的空格，可以使用 trimStart() 方法。

还是上面的例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trimStart();
console.log(trimmedGreeting); // 输出: "Hello World    "

在这个例子中，我们调用了 greeting 变量的 trimStart() 方法，并将结果存储在 trimmedGreeting 中。这个方法只会移除字符串开头的空格，结尾的空格仍然保留。

使用 trimEnd() 方法移除结尾空格

如果你只想移除字符串结尾的空格，可以使用 trimEnd() 方法。

还是上面的例子：

let greeting = "    Hello World    ";
let trimmedGreeting = greeting.trimEnd();
console.log(trimmedGreeting); // 输出: "    Hello World"

在这个例子中，我们调用了 greeting 变量的 trimEnd() 方法，并将结果存储在 trimmedGreeting 中。这个方法只会移除字符串结尾的空格，开头的空格仍然保留。

使用 replace() 方法移除特定字符

要移除字符串中的特定字符，可以使用 replace() 方法。

replace() 方法的语法如下：

string.replace(pattern, replacement);

replace() 方法有两个参数：pattern 和 replacement。

pattern 指定要查找和替换的字符或字符串，可以是特定字符、子字符串或正则表达式。
replacement 是用于替换 pattern 的新字符或字符串。

需要注意的是，replace() 方法不会修改原始字符串，而是返回一个新的字符串。

举个例子：

let sentence = "I love dogs";
let modifiedSentence = sentence.replace("dogs", "cats");
console.log(modifiedSentence); // 输出: "I love cats"

在这个例子中，我们声明了一个名为 sentence 的变量，并赋值为字符串 I love dogs。

然后，我们调用了 sentence 变量的 replace() 方法，将 dogs 替换成 cats，并将结果存储在一个新的变量 modifiedSentence 中。

最后，我们使用 console.log() 将新字符串打印到控制台，输出结果为 "I love cats"。

使用 replace() 方法移除多个相同字符

在前面的例子中，我们只替换了一个单词。如果想要替换多个相同的单词，该怎么办呢？

let sentence = "I love dogs because dogs are cute";
let modifiedSentence  = sentence.replace("dogs", "cats");
console.log(modifiedSentence); // 输出: "I love cats because dogs are cute"

在这个例子中，我们想要将 sentence 变量中的两个 dogs 都替换成 cats，但 replace() 方法默认只会替换第一个匹配的字符。

为了替换所有匹配的字符，我们需要使用正则表达式。

let sentence = "I love dogs because dogs are cute";
let modifiedSentence  = sentence.replace(/dogs/g, "cats");
console.log(modifiedSentence); // 输出: "I love cats because cats are cute"

在这个例子中，我们将第一个参数改成了正则表达式 /dogs/g，其中 g 表示全局匹配，这样就可以替换所有匹配的字符了。

附：使用 trim 的表单提交

解决上述问题只需要加一行代码即可：var str=ipt.value.trim()，这行代码拿到表单值并对其清除了前后空格，后续执行判断时拿到的值是没有前后空格的，也就意味着如果输入空白字符则会将处理为没有输入内容，从而解决了输入空格提交表单没有弹窗的情况

<body>
    <div class="box">
        <input type="text" placeholder="请输入内容">
        <button>提交</button>
        <p></p>
    </div>
     <script>
        var ipt=document.querySelector('input')
        var btn=document.querySelector('button')
        var p=document.querySelector('p')
        btn.addEventListener('click',function(){
            var str=ipt.value.trim()  //加入此行代码即可
            if(str===''){
                alert('请输入内容')
            }else{
                p.innerHTML=str;
            }
        })
     </script>
</body>

总结

本文介绍了一些 JavaScript 中修剪和替换字符串字符的方法，包括 trim()、trimStart()、trimEnd() 和 replace() 方法

到此这篇关于JavaScript字符串处理之trim()和replace()详解的文章就介绍到这了,更多相关JS字符串处理trim()和replace()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！