JS中replace函数大小写有分吗?一文看懂replace的使用
Admin 2022-01-28 群英技术资讯 1566 次浏览
JS中replace函数大小写有分吗?replace()函数表示将用一个字符串替换字符串中的所出现的特定内容。对于replace()方法区不区分大小写问题,有一些新手不是很清楚。对此,本文就给大家来详细的介绍一下replace()的使用。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
在javascript中,replace()函数可以不区分大小写的替换字符串,这需要借助正则表达式。
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法:
string.replace(searchvalue,newvalue)
| 参数 | 描述 |
|---|---|
| searchvalue | 必须。规定子字符串或要替换的模式的 RegExp 对象。 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 |
| newvalue | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
replace() 方法的第二个参数可以使用函数,当匹配时会调用该函数,函数的返回值将作为替换文本使用,同时函数可以接收以$为前缀的特殊字符,用来引用匹配文本的相关信息。
| 约定字符串 | 说明 |
|---|---|
| $1、$2、...、$99 | 与正则表达式中的第 1~99 个子表达式相匹配的文本 |
| $&(美元符号+连字符) | 与正则表达式相匹配的子字符串 |
| $’(美元符号+切换技能键) | 位于匹配子字符串左侧的文本 |
| $'(美元符号+单引号) | 位于匹配字符串右侧的文本 |
| $$ | 表示 $ 字符串 |
示例1
将字符串中的字符 a(不区分大小写) 替换为 x
<p>
将字符串中的字符 a(不区分大小写) 替换为 x
</p>
<p id="demo"></p>
<script>
var sText = "abcdefaABC";
//g 代表全局替换 i 代表 忽略大小写
var txt = sText.replace( /a/gi , 'x');
document.getElementById("demo").innerHTML = txt;
</script>输出结果:

示例2
下面代码把字符串中每个单词转换为首字母大写形式显示。
var s = 'javascript is script , is not java.'; //定义字符串
//定义替换文本函数,参数为第一个子表达式匹配文本
var f = function ($1) {
//把匹配文本的首字母转换为大写
return $1.substring(0,1).toUpperCase() + $1.substring(1).toLowerCase();}
var a = s.replace(/(\b\w+\b)/g, f); //匹配文本并进行替换
console.log(a); //返回字符串“JavaScript Is Script , Is Not Java.”在上面示例中替换函数的参数为特殊字符“$1”,它表示正则表达式 /(\b\w+\b)/ 中小括号匹配的文本,然后在函数结构内对这个匹配文本进行处理,截取其首字母并转换为大写形式,余下字符全为小写,然后返回新处理的字符串。replace() 方法是在原文本中使用这个返回的新字符串替换掉每次匹配的子字符串。
示例3
对于上面的示例还可以进一步延伸,使用小括号来获取更多匹配信息。例如,直接利用小括号传递单词的首字母,然后进行大小写转换处理,处理结果都是一样的。
var s = 'javascript is script , is not java.'; //定义字符串
var f = function ($1,$2,$3) { //定义替换文本函数,请注意参数的变化
return $2.toUpperCase() + $3;
}
var a = s.replace(/(\b\w+\b)/g, f);
console.log(a);在函数 f() 中,第一个参数表示每次匹配的文本,第二个参数表示第一个小括号的子表达式所匹配的文本,即单词的首字母,第二个参数表示第二个小括号的子表达式所匹配的文本。
replace() 方法的第二个参数是一个函数,replace() 方法会给它传递多个实参,这些实参都包含一定的意思,具体说明如下:
第一个参数表示与匹配模式相匹配的文本,如上面示例中每次匹配的单词字符串。
其后的参数是与匹配模式中子表达式相匹配的字符串,参数个数不限,根据子表达式数而定。
后面的参数是一个整数,表示匹配文本在字符串中的下标位置。
最后一个参数表示字符串自身。
示例4
把上面示例中替换文本函数改为如下形式。
var f = function() {
return arguments[1].toUpperCase() + arguments[2];
}也就是说,如果不为函数传递形参,直接调用函数的 arguments 属性同样能够读取到正则表达式中相关匹配文本的信息。其中:
arguments[0]:表示每次匹配的文本,即单词。
arguments[1]:表示第一个子表达式匹配的文本,即单词的首个字母。
arguments[2]:表示第二个子表达式匹配的文本,即单词的余下字母。
arguments[3]:表示匹配文本的下标位置,如第一个匹配单词“javascript”的下标位置就是0,以此类推。
arguments[4]:表示要执行匹配的字符串,这里表示“javascript is script , is not java.”。
示例5
下面代码利用函数的 arguments 对象主动获取 replace() 方法的第一个参数中正则表达式所匹配的详细信息。
var s = 'javascript is script , is not java.'; //定义字符串
var f = function () {
for (var i = 0; i < arguments.length; i++) {
console.log("第" + (i + 1) + "个参数的值:"+ arguments[i]);
}
console.log("-----------------------------");
}
var a = s.replace(/(\b\w+\b)/g, f);在函数结构体中,使用 for 循环结构遍历 arguments 属性时,发现每次匹配单词时,都会弹出 5 次提示信息,分别显示上面所列的匹配文本信息。其中,arguments[1]、arguments[2] 会根据每次匹配文本的不同,分别显示当前匹配文本中子表达式匹配的信息,arguments[3] 显示当前匹配单词的下标位置。而 arguments[0] 总是显示每次匹配的单词,arguments[4] 总是显示被操作的字符串。
现在大家对于“JS中replace函数大小写有分吗”应该都清楚了吧,本文对大家学习replace函数的使用有参考价值,需要的朋友可以了解看看。希望大家阅读完这篇文章能有所收获。最后,想要了解更多大家可以关注群英网络其它相关文章。
文本转载自PHP中文网
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要为大家介绍了JS new操作原理及手写函数模拟实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
今天给大家分享的是关于vue图片裁剪组件的内容,下文对vue图片裁剪组件的使用有详细的介绍及示例代码,有需要的朋友可以参考。本文介绍的组件是基于vue-cropper二次封装,接下来我们一起了解看看。
目录组件引用另一个组件出现组件不显示vue声明了一个组件,但是没有显示组件引用另一个组件出现组件不显示下载的一个vue构建的后台管理系统,导航栏是一个侧边栏,想在头部里面加一个导航先是导入要使用的组件import Hamburger from @/components/Hamburgerimport Nav from
本文将结合实例代码,介绍Vue中 Vue.prototype使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了微信小程序实现可拖动悬浮图标(包括按钮角标的实现),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008