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

前言

字符串操作是编程的基础技能。在 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>