JavaScript 字符串搜索
JavaScript基础 2022-04-25 01:31:46小码哥的IT人生shichen
JavaScript 字符串搜索
用于搜索字符串的 JavaScript 方法：
- String.indexOf()
- String.lastIndexOf()
- String.startsWith()
- String.endsWith()
String.indexOf()
indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：
示例代码：
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate") // 返回 7
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String 方法</h2>
<p>indexOf() 方法返回指定文本第一次出现的位置：</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("locate");
</script>
</body>
</html>
运行结果：
Javascript String 方法 indexOf() 方法返回指定文本第一次出现的位置： 7
JavaScript 从零开始计算位置。
0 是字符串中的第一个位置，1 是第二个，2 是第三个 ......
String.lastIndexOf()
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
示例代码：
let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate") // 返回 21
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String 方法</h2>
<p>lastIndexOf() 方法返回指定文本最后一次出现的位置：</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.lastIndexOf("locate");
</script>
</body>
</html>
运行结果：
Javascript String 方法 lastIndexOf() 方法返回指定文本最后一次出现的位置： 21
如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：
示例代码：
let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("Bill") // 返回 -1
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String 方法</h1>
<p>如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("Bill");
</script>
</body>
</html>
运行结果：
Javascript String 方法 如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1： -1
这两种方法都接受第二个参数作为搜索的开始位置：
示例代码：
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate", 15) // 返回 21
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String 方法</h2>
<p>indexOf() 方法接受第二个参数作为搜索的起始位置：</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.indexOf("locate",15);
</script>
</body>
</html>
运行结果：
Javascript String 方法 indexOf() 方法接受第二个参数作为搜索的起始位置： 21
lastIndexOf() 方法向后搜索（从末尾到开头），意思是：如果第二个参数是 15，则从位置 15 开始搜索，一直搜索到字符串的开头。
示例代码：
let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate", 15) // 返回 7
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String 方法</h2>
<p>lastIndexOf() 方法接受第二个参数作为搜索的起始位置。</p>
<p>请记住 lastIndexOf() 方法向后搜索，因此位置 15 表示从位置 15 开始搜索，并搜索到开头。</p>
<p>位置 15 指的是从开头算起的位置 15。</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.lastIndexOf("locate", 15);;
</script>
</body>
</html>运行结果：
Javascript String 方法 lastIndexOf() 方法接受第二个参数作为搜索的起始位置。 请记住 lastIndexOf() 方法向后搜索，因此位置 15 表示从位置 15 开始搜索，并搜索到开头。 位置 15 指的是从开头算起的位置 15。 7
String.search()
search() 方法在字符串中搜索指定值并返回匹配的位置：
示例代码：
let str = "Please locate where 'locate' occurs!";
str.search("locate") // 返回 7
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String 方法</h2>
<p>search() 方法返回指定文本在字符串中第一次出现的位置：</p>
<p id="demo"></p>
<script>
let str = "Please locate where 'locate' occurs!";
document.getElementById("demo").innerHTML = str.search("locate");
</script>
</body>
</html>运行结果：
Javascript String 方法 search() 方法返回指定文本在字符串中第一次出现的位置： 7
您注意到了吗？
indexOf() 和 search() 这两个方法，相等吗？
它们接受相同的参数，并返回相同的值？
这两种方法并不相等。差别如下：
search()方法不能接受第二个起始位置参数。indexOf()方法不能采用强大的搜索值（正则表达式）。
您将在后面的章节中学到有关正则表达式的更多内容。
String.match()
match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。
实例 1
在字符串中搜索 "ain"：
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g) // 返回数组 [ain,ain,ain]
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串搜索</h2>
<p>在字符串中搜索 "ain"：</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
document.getElementById("demo").innerHTML = text.match(/ain/g);
</script>
</body>
</html>
运行结果：
Javascript 字符串搜索 在字符串中搜索 "ain"： ain,ain,ain
读者可以在 JS RegExp 一章中学习有关正则表达式的更多内容。
如果正则表达式不包含 g 修饰符（执行全局搜索），match() 方法将只返回字符串中的第一个匹配项。
语法
string.match(regexp)
| regexp | 必需。需要搜索的值，为正则表达式。 |
| 返回： | 数组，包含匹配项，每个匹配项对应一个项目，若未找到匹配项，则为 null。 |
实例 2
对 "ain" 执行不区分大小写的全局搜索：
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi) // 返回数组 [ain,AIN,ain,ain]
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串搜索</h2>
<p>对 "ain" 执行不区分大小写的全局搜索：</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
document.getElementById("demo").innerHTML = text.match(/ain/gi);
</script>
</body>
</html>运行结果：
Javascript 字符串搜索 对 "ain" 执行不区分大小写的全局搜索： ain,AIN,ain,ain
String.includes()
如果字符串包含指定值，includes() 方法返回 true。
示例代码：
let text = "Hello world, welcome to the universe.";
text.includes("world") // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串搜索</h2>
<p>检查字符串是否包含 "world"：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持 includes() 方法。</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>
</body>
</html>
运行结果：
Javascript 字符串搜索 检查字符串是否包含 "world"： true Internet Explorer 不支持 includes() 方法。
浏览器支持
Internet Explorer 不支持 String.includes()。
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Chrome 41 | Edge 12 | Firefox 40 | Safari 9 | Opera 28 |
| 2015 年 3 月 | 2015 年 7 月 | 2015 年 8 月 | 2015 年 10 月 | 2015 年 3 月 |
语法
string.includes(searchvalue, start)
| searchvalue | 必需。需要搜索的字符串。 |
| start | 可选。默认为 0. 开始搜索的位置。 |
| 返回： | 如果字符串包含该值则返回 true，否则返回 false。 |
| JS 版本： | ES6 (2015) |
检查字符串是否包含 "world"，从位置 12 开始搜索：
let text = "Hello world, welcome to the universe.";
text.includes("world", 12) // 返回 false
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串搜索</h2>
<p>检查字符串是否包含 "world"：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持 includes() 方法。</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>
</body>
</html>运行结果：
Javascript 字符串搜索 检查字符串是否包含 "world"： false Internet Explorer 不支持 includes() 方法。
String.startsWith()
如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：
示例代码：
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>检查字符串是否以 "Hello" 开头：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持 startsWith() 方法。</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>
</body>
</html>
运行结果：
Javascript 字符串 检查字符串是否以 "Hello" 开头： true Internet Explorer 不支持 startsWith() 方法。
语法
string.startsWith(searchvalue, start)
参数值
| 参数 | 描述 |
|---|---|
| searchvalue | 必需。需要搜索的值。 |
| start | 可选。默认为 0。开始搜索的位置。 |
示例代码：
let text = "Hello world, welcome to the universe.";
text.startsWith("world") // 返回 false
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5) // 返回 false
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6) // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>startsWith() 方法。</p>
<p id="demo"></p>
<p>Internet Explorer 不支持 startsWith() 方法。</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>
</body>
</html>
运行结果：
Javascript 字符串 startsWith() 方法。 true Internet Explorer 不支持 startsWith() 方法。
注释：startsWith() 方法区分大小写。
Internet Explorer 不支持 startsWith() 方法。
第一个完全支持的浏览器版本是：
|
|
|
|
|
|---|---|---|---|---|
| Chrome 41 | Edge 12 | Firefox 17 | Safari 9 | Opera 28 |
| 2015 年 3 月 | 2015 年 7 月 | 2015 年 8 月 | 2015 年 10 月 | 2015 年 3 月 |
String.endsWith()
如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：
示例代码：
检查字符串是否以 "Gates" 结尾：
var text = "Bill Gates";
text.endsWith("Gates") // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>检查字符串是否以 "Gates" 结尾：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持 endsWith() 方法。</p>
<script>
let text = "Bill Gates";
document.getElementById("demo").innerHTML = text.endsWith("Gates");
</script>
</body>
</html>
运行结果：
Javascript 字符串 检查字符串是否以 "Gates" 结尾： true Internet Explorer 不支持 endsWith() 方法。
语法
string.endsWith(searchvalue, length)
参数值
| 参数 | 描述 |
|---|---|
| searchvalue | 必需。需要搜索的值。 |
| length | 可选。要搜索的长度。 |
检索以 "world" 结尾的字符串的前 11 个字符：
let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11) // 返回 true
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>检查以 "world" 结尾的字符串的前 11 个字符：</p>
<p id="demo"></p>
<p>Internet Explorer 不支持endsWith() 方法。</p>
<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>
</body>
</html>
运行结果：
Javascript 字符串 检查以 "world" 结尾的字符串的前 11 个字符： true Internet Explorer 不支持endsWith() 方法。
注释：endsWith() 方法区分大小写。
Internet Explorer 不支持 endsWith() 方法。
第一个完全支持该方法的浏览器版本是：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| 2016 年 5 月 | 2017 年 4 月 | 2017 年 6 月 | 2016 年 9 月 | 2016 年 6 月 |
相关阅读
-
无相关信息
