JavaScript字符串包含某个字符串|极客教程

JavaScript字符串包含某个字符串

在JavaScript中，我们经常需要判断一个字符串是否包含另一个字符串。这在实际开发中是非常常见的需求，比如搜索功能、过滤功能等。本文将详细介绍如何使用JavaScript来判断一个字符串是否包含另一个字符串。

使用includes()方法

JavaScript提供了includes()方法来判断一个字符串是否包含另一个字符串。这个方法返回一个布尔值，表示被搜索的字符串是否在原字符串中。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr = 'geek-docs';

console.log(str.includes(subStr)); // true

Output:

JavaScript字符串包含某个字符串

使用indexOf()方法

除了includes()方法外，我们还可以使用indexOf()方法来判断一个字符串是否包含另一个字符串。如果被搜索的字符串在原字符串中存在，则indexOf()方法会返回被搜索字符串的起始位置，否则返回-1。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr = 'geek-docs';

console.log(str.indexOf(subStr) !== -1); // true

Output:

JavaScript字符串包含某个字符串

使用正则表达式

我们还可以使用正则表达式来判断一个字符串是否包含另一个字符串。正则表达式提供了更灵活的匹配方式，可以实现更复杂的字符串匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr = 'geek-docs';

const regExp = new RegExp(subStr);

console.log(regExp.test(str)); // true

Output:

JavaScript字符串包含某个字符串

使用startsWith()和endsWith()方法

除了判断一个字符串是否包含另一个字符串，我们还可以使用startsWith()和endsWith()方法来判断一个字符串是否以某个字符串开头或结尾。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const startStr = 'Welcome';
const endStr = 'com';

console.log(str.startsWith(startStr)); // true
console.log(str.endsWith(endStr)); // true

Output:

JavaScript字符串包含某个字符串

忽略大小写进行匹配

有时候我们需要忽略字符串的大小写进行匹配，这时可以使用toLowerCase()或toUpperCase()方法将字符串转换为小写或大写后再进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr = 'Geek-Docs';

console.log(str.toLowerCase().includes(subStr.toLowerCase())); // true

Output:

JavaScript字符串包含某个字符串

使用正则表达式进行忽略大小写匹配

除了使用toLowerCase()或toUpperCase()方法外，我们还可以使用正则表达式的i标志来忽略大小写进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr = 'Geek-Docs';

const regExp = new RegExp(subStr, 'i');

console.log(regExp.test(str)); // true

Output:

JavaScript字符串包含某个字符串

使用includes()方法进行多个字符串匹配

includes()方法也可以同时判断多个字符串是否在原字符串中存在，只要其中一个字符串存在，就会返回true。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr1 = 'geek-docs';
const subStr2 = 'Welcome';

console.log(str.includes(subStr1, subStr2)); // true

Output:

JavaScript字符串包含某个字符串

使用正则表达式进行多个字符串匹配

正则表达式也可以用来同时匹配多个字符串，只要其中一个字符串匹配成功，就会返回true。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStr1 = 'geek-docs';
const subStr2 = 'Welcome';

const regExp = new RegExp(`{subStr1}|{subStr2}`);

console.log(regExp.test(str)); // true

Output:

JavaScript字符串包含某个字符串

使用includes()方法进行多个字符串匹配（数组）

如果我们有多个字符串需要匹配，可以将这些字符串放在一个数组中，然后使用includes()方法进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

console.log(subStrArr.some(subStr => str.includes(subStr))); // true

Output:

JavaScript字符串包含某个字符串

使用正则表达式进行多个字符串匹配（数组）

同样地，我们也可以将多个字符串放在一个数组中，然后使用正则表达式进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

const regExp = new RegExp(subStrArr.join('|'));

console.log(regExp.test(str)); // true

Output:

JavaScript字符串包含某个字符串

使用includes()方法进行多个字符串匹配（对象）

如果我们有多个字符串需要匹配，并且这些字符串有对应的键名，可以将这些字符串放在一个对象中，然后使用includes()方法进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrObj = {
  key1: 'geek-docs',
  key2: 'Welcome'
};

console.log(Object.values(subStrObj).some(subStr => str.includes(subStr))); // true

Output:

JavaScript字符串包含某个字符串

使用正则表达式进行多个字符串匹配（对象）

同样地，我们也可以将多个字符串放在一个对象中，然后使用正则表达式进行匹配。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrObj = {
  key1: 'geek-docs',
  key2: 'Welcome'
};

const regExp = new RegExp(Object.values(subStrObj).join('|'));

console.log(regExp.test(str)); // true

Output:

JavaScript字符串包含某个字符串

使用Array.prototype.every()方法进行多个字符串匹配

除了some()方法外，我们还可以使用every()方法来判断所有字符串是否都在原字符串中存在。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

console.log(subStrArr.every(subStr => str.includes(subStr))); // true

Output:

JavaScript字符串包含某个字符串

使用Array.prototype.filter()方法进行多个字符串匹配

如果我们需要找出原字符串中包含的所有字符串，可以使用filter()方法来过滤出符合条件的字符串。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome', 'example'];

const matchedSubStr = subStrArr.filter(subStr => str.includes(subStr));

console.log(matchedSubStr); // ['geek-docs', 'Welcome']

Output:

JavaScript字符串包含某个字符串

使用Array.prototype.map()方法进行多个字符串匹配

如果我们需要对原字符串中包含的所有字符串进行处理，可以使用map()方法来处理每个匹配的字符串。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

const processedSubStr = subStrArr.map(subStr => str.replace(subStr, subStr.toUpperCase()));

console.log(processedSubStr); // ['Welcome to GEEK-DOCS.com', 'WELCOME to geek-docs.com']

Output:

JavaScript字符串包含某个字符串

使用Array.prototype.reduce()方法进行多个字符串匹配

如果我们需要对原字符串中包含的所有字符串进行累加处理，可以使用reduce()方法来处理每个匹配的字符串。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

const totalLength = subStrArr.reduce((acc, subStr) => acc + subStr.length, 0);

console.log(totalLength); // 18

Output:

JavaScript字符串包含某个字符串

使用正则表达式进行多个字符串匹配（替换）

如果我们需要将原字符串中包含的所有字符串替换为其他字符串，可以使用正则表达式的replace()方法来实现。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'Welcome'];

const replacedStr = str.replace(new RegExp(subStrArr.join('|'), 'g'), 'example');

console.log(replacedStr); // 'example to example.com'

Output:

JavaScript字符串包含某个字符串

使用String.prototype.split()方法进行多个字符串匹配

如果我们需要将原字符串按照包含的多个字符串进行分割，可以使用split()方法来实现。

示例代码如下：

const str = 'Welcome to geek-docs.com';
const subStrArr = ['geek-docs', 'to'];

const splittedStr = str.split(new RegExp(subStrArr.join('|')));

console.log(splittedStr); // ['Welcome ', ' geek-docs.com']