极客笔记HTML和JS中字符串包含某个字符
在HTML和JavaScript中，我们经常需要判断一个字符串是否包含某个特定的字符或子串。本文将详细介绍如何在HTML和JavaScript中实现字符串包含某个字符的功能，并提供多个示例代码来帮助读者更好地理解。
1. 使用JavaScript的includes()方法
JavaScript中的字符串对象提供了一个includes()方法，用于判断一个字符串是否包含另一个字符串。这个方法返回一个布尔值，表示目标字符串是否包含指定的子串。
示例代码如下：
const str = 'Welcome to deepinout.com';
const subStr = 'deepinout';
if (str.includes(subStr)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
2. 使用JavaScript的indexOf()方法
除了includes()方法外，JavaScript还提供了indexOf()方法，用于返回指定字符串在目标字符串中第一次出现的位置。如果目标字符串中不包含指定字符串，则返回-1。
示例代码如下：
const str = 'Welcome to deepinout.com';
const subStr = 'deepinout';
if (str.indexOf(subStr) !== -1) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
3. 使用HTML的innerHTML属性
在HTML中，我们可以使用innerHTML属性来获取或设置元素的内容。通过innerHTML属性，我们可以获取包含在元素中的文本内容，并进行字符串包含某个字符的判断。
示例代码如下：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Welcome to deepinout.com</p>
<script>
const str = document.getElementById('demo').innerHTML;
const subStr = 'deepinout';
if (str.includes(subStr)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
</script>
</body>
</html>
Output:
4. 使用JavaScript的正则表达式
JavaScript中的正则表达式也可以用来判断一个字符串是否包含某个字符或子串。我们可以使用test()方法来检测字符串中是否存在指定的模式。
示例代码如下：
const str = 'Welcome to deepinout.com';
const pattern = /deepinout/;
if (pattern.test(str)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
5. 使用JavaScript的match()方法
JavaScript中的字符串对象还提供了match()方法，用于在字符串中查找指定的模式。如果找到匹配的模式，则返回一个包含匹配结果的数组，否则返回null。
示例代码如下：
const str = 'Welcome to deepinout.com';
const pattern = /deepinout/;
if (str.match(pattern)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
6. 使用JavaScript的search()方法
JavaScript中的search()方法用于在字符串中查找指定的子串，并返回第一个匹配的位置。如果找到匹配的子串，则返回子串的起始位置，否则返回-1。
示例代码如下：
const str = 'Welcome to deepinout.com';
const subStr = 'deepinout';
if (str.search(subStr) !== -1) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
7. 使用JavaScript的正则表达式和exec()方法
除了match()方法外，我们还可以使用正则表达式的exec()方法来查找字符串中的匹配项。exec()方法返回一个数组，包含匹配的子串及其相关信息。
示例代码如下：
const str = 'Welcome to deepinout.com';
const pattern = /deepinout/;
if (pattern.exec(str)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
8. 使用JavaScript的split()方法
JavaScript中的split()方法可以将一个字符串分割成子串，并返回一个包含分割后子串的数组。我们可以使用split()方法来判断一个字符串是否包含某个字符或子串。
示例代码如下：
const str = 'Welcome to deepinout.com';
const subStr = 'deepinout';
if (str.split(subStr).length > 1) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
9. 使用JavaScript的matchAll()方法
JavaScript中的matchAll()方法用于在字符串中查找所有匹配的子串，并返回一个包含匹配结果的迭代器。我们可以使用matchAll()方法来判断一个字符串中是否包含某个字符或子串。
示例代码如下：
const str = 'Welcome to deepinout.com';
const pattern = /deepinout/g;
const matches = str.matchAll(pattern);
let isContain = false;
for (const match of matches) {
isContain = true;
break;
}
if (isContain) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
10. 使用JavaScript的正则表达式和test()方法
JavaScript中的正则表达式的test()方法用于检测字符串中是否存在指定的模式。test()方法返回一个布尔值，表示字符串中是否存在匹配的模式。
示例代码如下：
const str = 'Welcome to deepinout.com';
const pattern = /deepinout/;
if (pattern.test(str)) {
console.log('字符串包含deepinout.com');
} else {
console.log('字符串不包含deepinout.com');
}
Output:
