侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

javascript正则表达式和字符串RegExp and String(二)

前端  /  管理员 发布于 4年前   262

在上篇文章给大家介绍了javascript正则表达式和字符串RegExp and String(一),本文给大家继续分享相关内容。

前言

我认为,在学习一门编程语言的过程中,字符串、数组、容器是非常重要的部分,为了提高编程效率,我通常会对字符串、数组以及容器作深入的学习,详细了解相关特点及对应的API。这篇文章是针对javascript字符串学习写下的笔记,在此与需要的朋友分享。

思维导图

字符串的创建方式

字符串是javascript中的基本类型之一,它对应的类型是String,可以通过两种方式来创建字符串:

通过变量赋值的方式, 创建字符串的基本类型
通过构造方法(String),创建字符串对象

虽然两种方式创建出的字符串表现形式不一样,但在某些场景下,我们需要的是字符串,但不关心它是字符串基本类型还是字符串对象。在这种场景下,字符串的判断就会发生了一点小小的变化。

具体可参照下面代码加深理解:

var s = 'abcd1234DCBA'; //推荐的创建字符串方式var s1 = 'abcd1234DCBA';var s2 = new String(s); // 通过构造方法创建字符串var s3 = new String(s);console.log(s===s1); //true 具有值类型的特性console.log(s===s2); //false 基本类型和对象不相等console.log(s2===s3); //false 不同的对象不相等console.log(typeof s); // stringconsole.log(typeof s2); // object//判断输入值是否是基本类型字符串function isString(s) { return typeof s === 'string'}console.log(isString(s)); //trueconsole.log(isString(s2)); //false//判断输入值是否是字符串(基本类型+字符串对象形式)function isString2(s) { return s != null && typeof s.valueOf() === 'string';}console.log(isString2(s)); //trueconsole.log(isString2(s2)); //true

字符串的值不变特性

字符串在Javascript中是不可变的。所谓的不可变是指当你生成一个字符串后,然后调用该字符串的API来操作该字符串,该字符串的原始值是不会发生变化的,调用处理后的结果是一个新的字符串。
可参照下面代码加深理解:

  var s = new String('abc');  var r = s.toUpperCase();  alert(s);  // abc  s本身是不会发生变化的  alert(r);  //  ABC

常用API - 字符串截取

不关于字符串的截取,掌握下面三个API即可:

slice : String.slice(N1,N2) 这个就是我们常用的从指定的位置(N1)到指定的位置(N2)的字符串;
substring : String.substring(N1,N2) 这个就是我们常用的从指定的位置(N1)到指定的位置(N2)的字符串;
substr : String.substr(N1,N2) 这个就是我们常用的从指定的位置(N1)截取指定长度(N2)的字符串;

可参考下面代码加深理解:

var s = '0123456789';
var r1 = s.substring(1); //123456789 第二个参数默认为字符length
var r2 = s.substring(1,5); //1234
var r3 = s.substring(1); //123456789 第二个参数默认为字符length
var r4 = s.substring(1,5); //1234
var r5 = s.substr(1); //123456789 第二个参数默认为字符length
var r6 = s.substr(2,5); //23456
var r7 = s.substr(2,100); //23456789 第二个参数大于字符length,不受影响

常用API - 字符串检索

关于字符串的检索操作,掌握下面三个API即可。字符串检索在其它编程语言中很常见,indexOf以及lastIndexOf这两个API子啊其它编程语言中非常常见,理解起来也相对容易。关于search,和indexOf类似,只是它的输入参数不是检索的字符串,而是一个正则表达式, 返回值为正则表达式第一个匹配项的索引。

具体可参考下面代码加深理解:

var s = '0123abc401234';console.log(s.indexOf('23')); // 2console.log(s.lastIndexOf('23')); // 10console.log(s.search(/[a-z]+/g)); // 4 检索出现字符的开始位置

常用API - 字符串替换

JS中一般调用replace方法来对字符串中某些字符的替换,该方法接收两个参数:
* 第一个参数是用来描述要被替换的子字符串,参数类型可以是字符串也可以是正则表达式。这里千万要注意,如果是字符串,则只会替换原字符串中第一个匹配的子串,而如果是未设置标识'g'的正则表达式,替换时得出的结果也是一样的,如果想替换所有匹配的子字符串,则必须传入带有标识g的正则表达式
* 第二个参数是用来描述替换值。参数类型可以是一个字符串,也可以是一个函数,还可以是包含特殊序列字符(RegExp的静态属性:−/&/‘/'/1..n/$$等)。

具体可参照下面代码加深理解:

代码一. 基本匹配操作

var s = 'cat,bat,sat,fat';var res = s.replace('at','NE');console.log(res);//cNE,bat,sat,fat 只替换第一个匹配项var res1 = s.replace(/at/,'NE');console.log(res1); //cNE,bat,sat,fat 还是只替换第一个匹配项var res2 = s.replace(/at/g,'NE');console.log(res2); //cNE,bNE,sNE,fNE 替换所有的匹配项

代码二 . 第二个参数是函数

var s = 'ab<name>cd';// 模拟HTML对符合 < >进行转义var res = s.replace(/[<>]/g,function(match,index,souStr) {  switch(match) {  case '<': return '<';  case '>': return '>';  }});console.log(res); // ab<name>cd

代码三. 才有特殊序列字符进行灵活替换

// 针对字符sou,将关键字key用{}扩起来function strong(sou,key) { var re = new RegExp('('+key+')','g'); return sou.replace(re,'{$1}'); //$1 第一个捕获组}console.log(strong(s,'at')); //c{at},b{at},s{at},f{at}// 针对字符sou,将关键字key用{}扩起来 function strong2(sou,key) { var re = new RegExp(key,'g'); return sou.replace(re,'{$&}'); //$& 匹配的字符串 }console.log(strong2(s,'at')); //c{at},b{at},s{at},f{at}

常用API - 字符串分组

JS中采用split方法来对字符串进行分组,该方法可接收两个参数:
* 第一个参数表示分隔符,可以是字符串类型,也可以是RegExp对象。
* 第二个参数是可选的,表示接收组的数量,也就是返回结果数组的大 小。如果不指定该参数,表示返回所有组。
具体可参照下面代码加深理解:

var s = 'cat,bat,sat,fat';var res = s.split(',');console.log(res); //[ 'cat', 'bat', 'sat', 'fat' ]var res2 = s.split(/,/);console.log(res2); //[ 'cat', 'bat', 'sat', 'fat' ]var res3 = s.split(/,/,2);console.log(res3); //[ 'cat', 'bat' ] 只返回2组

常用API - 字符串匹配

match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

注意:在全局检索模式下,match() 即不提供与子表达式匹配的文本的信息,也不声明每个匹配子串的位置。如果您需要这些全局检索的信息,可以使用 RegExp.exec()。

具体可以参照下面代码加深理解:

var s = 'cat,bat,sat,fat'; var reg = /[a-z](at)/ ;console.log(s.match(reg)); //[ 'cat', 'at', index: 0, input: 'cat,bat,sat,fat' ]var res = s.match(/[a-z](at)/g);console.log(res); //[ 'cat', 'bat', 'sat', 'fat' ]

常用API - 字符串比较

两种比较方式,一种是才有 大于或小于符号,另一种是采用localeCompare方法,注意该方法的返回的是一个数字,数字的含义与其它编程语言比较结果类似,不作过多解释了。牵涉的区域相关,推荐使用localeCompare来对字符串进行比较。
具体可参照下面代码加深理解:

var s1 = 'abc';var s2 = 'bcd';var s3 = new String('abc');console.log(s1>s2); //trueconsole.log(s1==s3); //true 将s1与s3.toString()进行比较console.log(s1.localeCompare(s2)); // -1 s1 小于 s2console.log(s1.localeCompare(s3)); // 0 s1的值与s3相等

以上内容就是本文给大家分享的javascript正则表达式和字符串RegExp and String(二),希望大家喜欢。


  • 上一条:
    比较全面的C 、Java、JavaScript中的正则表达式详解
    下一条:
    编写高质量的js之正确理解正则表达式回溯
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客