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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现仿UC浏览器前进后退效果的实例代码，实现此功能前需要先测试下浏览器，具体实例代码，大家参考下本文2017-07-07
这篇文章主要介绍了js中键盘事件,以一个较为简单的实例形式分析了js响应键盘事件的操作技巧,需要的朋友可以参考下2015-01-01
本文主要介绍了文件上传插件SWFUpload使用指南,SWFUpload是一个flash和js相结合而成的文件上传插件，其功能非常强大。需要的朋友可以参考下2016-11-11
下面小编就为大家带来一篇js模拟百度模糊搜索的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了js实现连连看游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了JS时间转换标准格式、时间戳转换标准格式的示例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
当一个页面有多个a标签，实现当前点击a标签变色，其他a标签回复原色，具体实现如下，喜欢的朋友可以参考下2013-11-11
这篇文章主要介绍了js获取客户端网卡的IP地址、MAC地址的方法,需要的朋友可以参考下2014-03-03
Javascript将string类型转换int类型的过程中总会出现不如意的问题，下面为大家介绍下js string转int的一些注意的问题，感兴趣的朋友可以参考下2013-08-08
本文是小编在平时项目中收集整理的javascript常用函数方法，特别是javascript方法经常会用到，对javascript函数方法相关知识感兴趣的朋友一起学习吧2015-12-12
最新评论