JavaScript 字符串搜索


目录

    显示目录

字符串搜索方法

  • String indexOf()
  • String lastIndexOf()
  • String search()
  • String match()
  • String matchAll()
  • String includes()
  • String startsWith()
  • String endsWith()

JavaScript 字符串indexOf()

indexOf() 方法返回 index (位置) 字符串中第一次出现的字符串:

例子

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

笔记

JavaScript 从零开始计算位置。

0 是 a 中的第一个位置 字符串,1 是第二个,2 是第三个,...


JavaScript 字符串 lastIndexOf()

lastIndexOf() 方法返回 lastindex 字符串中指定文本的出现:

例子

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The position of the last occurrence of "locate" is:</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

indexOf()lastIndexOf() 都返回 -1 如果找不到文本:

例子

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("John");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>Both indexOf() and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("John");
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>

两种方法都接受第二个参数作为起始位置 搜索:

例子

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate", 15);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>

<p>The indexOf() method accepts a second parameter as the starting position for the search:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate",15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

lastIndexOf() 方法向后搜索 (从结尾到开头),意思是: 如果第二个参数是15,则搜索从位置开始 15,并搜索到字符串的开头。

例子

let text = "Please locate where 'locate' occurs!";
text.lastIndexOf("locate", 15);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The lastIndexOf() Method</h2>

<p>The lastIndexOf() method accepts a second parameter as the starting position for the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means start the search at position 15, and search to the beginning.</p>

<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>


JavaScript 字符串搜索()

search() 方法在字符串中搜索字符串(或正则表达式) 并返回匹配的位置:

例子

let text = "Please locate where 'locate' occurs!";
text.search("locate");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>The position of the first occurrence of "locate" is:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search("locate");
document.getElementById("demo").innerHTML = index; 
</script>

</body>
</html>

let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The search() Method</h2>

<p>The search() method returns the position of the first occurrence of a string in a string.</p>
<p>Return the position of the first occurrence of a regular expression:</p>
<p id="demo"></p>

<script>
let text = "Please locate where 'locate' occurs!";
let index = text.search(/locate/);
document.getElementById("demo").innerHTML = index;
</script>

</body>
</html>


你注意到了吗?

indexOf()search() 这两个方法相等?

他们接受相同的参数(参数),并返回相同的值?

这两种方法相同。这些是差异:

  • search() 方法不能采用第二个起始位置参数。

  • indexOf() 方法不能采用 强大的搜索值(正则表达式)。

您将了解更多有关 正则表达式将在后面的章节中介绍。



JavaScript 字符串匹配()

match() 方法返回一个包含匹配结果的数组 字符串与字符串(或正则表达式)。

例子

搜索“ain”:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match("ain"); 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain";
const myArr = text.match("ain");
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

搜索“ain”:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/); 

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;

</script>

</body>
</html>

对“ain”执行全局搜索:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/g); 

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/g);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

对“ain”执行全局、不区分大小写的搜索:

let text = "The rain in SPAIN stays mainly in the plain"; 
text.match(/ain/gi);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>

<p>Perform a global, case-insensitive search for "ain":</p>

<p id="demo"></p>

<script>
let text = "The rain in SPAIN stays mainly in the plain"; 
const myArr = text.match(/ain/gi);
document.getElementById("demo").innerHTML = myArr.length + " " + myArr;
</script>

</body>
</html>

笔记

如果正则表达式不包含 g 修饰符(全局搜索), match() 将仅返回字符串中的第一个匹配项。

在 JS RegExp 一章中了解有关正则表达式的更多信息。


JavaScript 字符串 matchAll()

matchAll() 方法返回一个包含匹配结果的迭代器 字符串与字符串(或正则表达式)。

例子

const iterator = text.matchAll("Cats");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

如果参数是正则表达式,则必须设置全局标志(g),否则 抛出类型错误。

例子

const iterator = text.matchAll(/Cats/g);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

如果要搜索不区分大小写,则必须设置不敏感标志 (i):

例子

const iterator = text.matchAll(/Cats/gi);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

笔记

matchAll() 是 ES2020 功能。

matchAll() 在 Internet Explorer 中不起作用。


JavaScript 字符串包含()

如果字符串包含指定值,则 includes() 方法返回 true。

否则返回 false

例子

检查字符串是否包含“world”:

let text = "Hello world, welcome to the universe.";
text.includes("world");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

检查字符串是否包含“world”。从位置 12 开始:

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world" starting from position 12:</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world", 12);
</script>

</body>
</html>

笔记

includes() 区分大小写。

includes() 是 ES6 功能。

Internet Explorer 不支持 includes()


JavaScript 字符串startsWith()

startsWith() 方法返回 true 如果字符串以指定值开头。

否则返回 false

例子

返回真:

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

返回错误:

let text = "Hello world, welcome to the universe.";
text.startsWith("world")

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world");
</script>

</body>
</html>

可以指定搜索的起始位置:

返回错误:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5)

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 5);
</script>

</body>
</html>

返回真:

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6)

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("world", 6);
</script>

</body>
</html>

笔记

startsWith() 区分大小写。

startsWith() 是 ES6 功能。

Internet Explorer 不支持 startsWith()


JavaScript 字符串结束()

endsWith() 方法返回 true 如果字符串以指定值结尾。

否则返回 false

例子

检查字符串是否以“Doe”结尾:

let text = "John Doe";
text.endsWith("Doe");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

检查字符串的前 11 个字符是否以“world”结尾:

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check in the 11 first characters of a string ends with "world":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.endsWith("world", 11);
</script>

</body>
</html>

笔记

endsWith() 区分大小写。

endsWith() 是 ES6 功能。

Internet Explorer 不支持 endsWith()


完整的字符串参考

有关完整的字符串参考,请访问我们的:

完整的 JavaScript 字符串参考。

该参考包含所有字符串属性和方法的描述和示例。