在开发中经常需要检索字符串、查找特定字符串。用户可以选用下面的方法执行对应的操作,说明如表所示。

String 类型的查找字符串方法

字符串方法

说明

charAt()

返回字符串中的第 n 个字符

charCodeAt()

返回字符串中的第 n 个字符的代码

indexOf()

检索字符串

lastIndexOf()

从后向前检索一个字符串

match()

找到一个或多个正则表达式的匹配

search()

检索与正则表达式相匹配的子串

查找字符

使用字符串的 charAt() 和 chatCodeAt() 方法,可以根据参数(非负整数的下标值)返回指定位置的字符或字符编码。

对于 charAt() 方法来说,如果参数不在 0 和字符串的 length-1 之间,则返回空字符串;而对于 charCodeAt() 方法来说,则返回 NaN,而不是 0 或空字符串。

示例1

下面示例为 String 类型扩展一个原型方法,用来把字符串转换为数组。在函数中使用 charAt() 方法读取字符串中每个字符,然后装入一个数组并返回。

String.prototype.toArray = function () { //把字符串转换为数组

var 1 = this.length; a = []; //获取当前字符串长度,并定义空数组

if (1) { //如果存在则执行循环操作,预防空字符串

for (var i = 0; i < 1; i ++) { //遍历字符串,枚举每个字符

a.push(this.charAt(i)); //把每个字符按顺序装入数组

}

}

return a; //返回数组

}

应用原型方法:

var s = "abcdefghijklmn".toArray(); //把字符串转换为数组

for (var i in s) { //遍历返回数组,显示每个字符

console.log(s[i]);

}

查找字符串

使用字符串的 indexOf() 和 lastIndexOf() 方法,可以根据参数字符串,返回指定子字符串的下标位置。这两个方法都有两个参数,说明如下。

第一个参数为一个子字符串,指定要查找的目标。

第二个参数为一个整数,指定查找的起始位置,取值范围是 0~length-1。

对于第二个参数来说,需要注意一下几个特殊情况。

如果值为负数,则视为 0,相当于从第一个字符开始查找。

如果省略了这个参数,也将从字符串的第一个字符开始查找。

如果值大于等于 length 属性值,则视为当前字符串中没有指定的子字符串,返回 -1。

示例2

下面代码查询字符串中首个字母 a 的下标位置。

var s = "JavaScript";

var i = s.indexOf("a");

console.log(i); //返回值为1,即字符串中第二个字符

indexOf() 方法只返回查找到的第一个子字符串的起始下标值,如果没有找到则返回 -1。

示例3

下面代码查询 URL 字符串中首个字母 n 的下标位置。

var s = "c.biancheng.net";

var a = s.indexOf("biancheng"); //返回值为3,即第一个字符n的下标位置

如果要查找下一个子字符串,则可以使用第二个参数来限定范围。

示例4

下面代码分别查询 URL 字符串中两个点号字符下标的位置。

var s = "c.biancheng.net";

var b = s.indexOf("."); //返回值为1,即第一个字符.的下标位置

var e = s.indexOf(".", b + 1); //返回值为11,即第二个字符.的下标位置

indexOf() 方法是按照从左到右的顺序进行查找的。如果希望从右到左来进行查找,则可以使用 lastIndexOf() 方法来查找。

示例5

下面代码按从右到左的顺序查询 URL 字符串中最后一个点号字符的下标位置。

var s = "c.biancheng.net";

var n = s.lastIndexOf("."); //返回值为11,即第二个字符.的下标位置

lastIndexOf() 方法的查找顺序是从右到左但是其参数和返回值都是根据字符串的下标按照从左到右的顺序来计算的,即字符串第一个字符下标值始终都是 0,而最后一个字符的下标值始终都是 length-1。

示例6

lastIndexOf() 方法的第二个参数指定开始查找的下标位置,但是,将从该点开始向左查找,而不是向右查找。

var s = "http://c.biancheng.net";

var n = s.lastIndexOf(".", 11); //返回值是8,而不是18

其中第二个参数值 11 表示字符 a (第一个)的下标位置,然后从左侧开始向左查找,所以就返回第一个点号的位置。如果找到,则返回第一次找到的字符串的起始下标值。

var s = "http://c.biancheng.net";

var n = s.lastIndexOf("c"); //返回值为7

如果没有设置第二个参数,或者为参数负值,或者参数大于等于 length,则将遵循 indexOf() 方法进行操作。

搜索字符串

search() 方法和 indexOf() 的功能是相同的,查找指定字符串第一次出现的位置。但是 search() 方法仅有一个参数,定义匹配模式。该方法没有 lastIndexOf() 的反向检索功能,也不支持全局模式。

示例7

下面代码使用 search() 方法匹配斜杠字符在 URL 字符串的下标位置。

var s = "c.biancheng.net";

n="s.search("//");"

search() 方法参数定义:

search() 方法的参数为正则表达式(RegExp 对象)。如果参数不是 RegExp 对象,则 JavaScript 会使用 RegExp() 函数把它转换为 RegExp 对象。

search() 方法遵循从左到右的查找顺序,并返回第一个匹配的子字符串的起始下标位置值。如果没有找到,则返回 -1。

search() 方法无法查找指定的范围,始终返回的第一个匹配子字符串的下标值,没有 indexOf() 方法灵活。

匹配字符串

match() 方法能够找出所有匹配的子字符串,并以数组的形式返回。

示例8

下面代码使用 match() 方法找到字符串中所有字母 c,并返回它们。

var s = "http://c.biancheng.net";

var a = s.match(/c/n); //全局匹配所有字符c

console.log(a); //返回数组[c,c]。

match() 方法返回的是一个数组,如果不是全局匹配,那么 match() 方法只能执行一次匹配。例如,下面匹配模式没有 n 的修饰符,只能够执行一次匹配,返回仅有一个元素 c 的数组。

var a = s.match(/c/); //返回数组[h]

如果没有找到匹配字符,则返回 null,而不是空数组。

当不执行全局匹配时,如果匹配模式包含子表达式,则返回子表达式匹配的信息。

示例9

下面代码使用 match() 方法匹配 URL 字符串中所有点号字符。

var s = "http://c.biancheng.net";

var a = s.match(/(\.).*(\.).*(\.)/ ); //执行一次匹配检索

console.log(a.length);

console.log(a[0]);

console.log(a[1]);

console.log(a[2]);

console.log(a[3]);

在这个正则表达式 “/(\.).*(\.).*(\.)/”中,左右两个斜杠是匹配模式分隔符,JavaScript 解释器能够根据这两个分隔符来识别正则表达式。在正则表达式中小括号表示子表达式,每个子表达式匹配的文本信息会被独立存储。点号需要转义,因为在正则表达式中它表示匹配任意字符,星号表示前面的匹配字符可以匹配任意多次。

在上面示例中,数组 a 包含 4 个元素,其中第一个元素存放的是匹配文本,其余元素存放的是每个正则表达式的子表达式匹配的文本。

另外,返回的数组还包含两个对象属性,其中 index 属性记录匹配文本的起始位置,input 属性记录的是被操作的字符串。

console.log(a.index);

console.log(a.input);

在全局匹配模式下,match() 将执行全局匹配。此时返回的数组元素存放的是字符串中所有匹配文本,该数组没有 index 属性和 input 属性;同时不再提供子表达式匹配的文本信息,也不提示每个匹配子串的位置。如果需要这些信息,可以使用 RegExp.exec() 方法。

js查找html里面的字符串,JS字符串查找(6种方法)相关推荐

  1. JavaScript字符串转数字的5种方法及其陷阱

    2019独角兽企业重金招聘Python工程师标准>>> 摘要 :JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法! 原文: Converting St ...

  2. JS获取URL中参数值(QueryString)的4种方法分享

    http://www.jb51.net/article/48942.htm JS获取URL中参数值(QueryString)的4种方法分享 作者: 字体:[增加 减小] 类型:转载 今天碰到要在一个页 ...

  3. 字符串html在线互转,将string 的字符串转换为HTML的两种方法

    将string 的字符串转换为HTML的两种方法 采用jquery对象转换 采用原生javascript中DOMParser的parseFromString方法实现 1.采用jquery实现 var ...

  4. php 正则获取数字,php结合正则获取字符串中数字的几种方法

    本篇文章主要介绍php结合正则获取字符串中数字的几种方法,感兴趣的朋友参考下,希望对大家有所帮助. php结合正则获取字符串中数字<?php $patterns = "/\d+/&qu ...

  5. linux中复制字符串出错,C语言实现字符串的复制的两种方法

    本文将要为您介绍的是C语言实现字符串的复制的两种方法,具体操作方法: 利用数组实现 1 #include 2 #include 3 4 void copy_string(char str1[],cha ...

  6. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示的两种方法: js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了. 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的 ...

  7. java字符串统计字母个数_java8 统计字符串字母个数的几种方法总结(推荐)

    1.统计字符串字母个数(并且保持字母顺序) 比如: aabbbbbbbba喔喔bcab cdabc deaaa 目前我做知道的有5种方式噢,如果你还有更好的,欢迎赐教 //方式1 public sta ...

  8. js中判断文本框是否为空的两种方法

    js中判断文本框是否为空的两种方法 //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为: ...

  9. html将字符串转为数值,JavaScript字符串转数字的5种方法及其陷阱

    JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法!下面本篇文章就来介绍一下JavaScript字符串转数字的5种方法及其陷阱,希望对大家有所帮助. String 转换为 ...

  10. html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法

    JS控制HTML元素的显示和隐藏的两种方法 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...

最新文章

  1. netty系列之:在netty中使用protobuf协议
  2. Spring Boot + JSP
  3. Hibernate Tomcat JNDI DataSource示例教程
  4. 20、淘宝技术这十年
  5. 最详细的 UART协议 分析在这里!
  6. 码头tsb_码头工人及其内部
  7. 如何扩充C盘容量(在不重装系统或删除其他盘内容的条件下)
  8. 了解计算机病毒及杀毒方式,最简易的计算机病毒查杀方法
  9. 使用Feign调用时添加验证信息token到请求头
  10. Python Turtle 小项目 8 各种音符的绘制
  11. 应届毕业生不想应聘上班,一心想独自创业,有什么好的项目推荐?
  12. 图片鼠标移入图片改变颜色、显示另外一张图片(2种方式)
  13. Git常用命令有哪些?
  14. pHP分析网站日志,通过用数据挖掘技术来分析Web网站日志?
  15. android 根文件系统,Android根文件系统相关应用介绍
  16. winds配置nginx反向代理和负载均衡
  17. 医院计算机中心应急演练,我院开展信息系统故障应急演练
  18. 全国首部Asp.net MVC5 视频课程
  19. 众昂矿业刘金海:我国萤石进出口现状解析
  20. android 3d flip动画,3D Flip Board

热门文章

  1. 找靓机的隐藏功能计算机教程,别让3D Touch成为摆设,很多人不知道的隐藏功能,很实用...
  2. 名帖382 文徵明 行草《前后赤壁赋》
  3. 指纹浏览器的使用步骤
  4. cad在布局怎么调比例_cad中的布局怎么调整比例
  5. 假如程序员生活在童话里......
  6. 记录java人生,分享快乐生活
  7. 网络安全——一图看懂HTTPS建立过程
  8. kotlin和java函数式编程
  9. 苹果11蓝牙配对不成功怎么办_Apple Watch与iPhone配对失败该怎么办?
  10. rabbitMQ-学习笔记