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阻止事件冒泡行为和闭包的方法的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了js canvas实现飞机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
各种常用浏览器getBoundingClientRect的解析
getBoundingClientRect2009-05-05
这篇文章主要介绍了三种JavaScript中常用的函数类型，包括匿名函数、动态函数、可变参数函数，感兴趣的小伙伴们可以参考一下2015-11-11
BootstrapValidator实现注册校验和登录错误提示效果
这篇文章主要为大家详细介绍了Bootstrap Validator实现注册校验和登录错误提示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要和大家分享一个炫酷的碎片式切图效果，本文主要利用canvas来实现，代码量不多，但有些地方还是需要花点时间去理解的，感兴趣的可以学习一下2022-10-10
这篇文章主要介绍了Javascript监视变量变化的方法,涉及javascript针对变量的相关操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JS获取当前时间戳与时间戳转日期时间格式,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。2021-05-05
这篇文章主要为大家详细介绍了微信小程序实现批量倒计时功能，适用于商品列表倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
最新评论