当前位置:首页 > JavaScript

js实现匹配

2026-04-06 23:33:19JavaScript

JavaScript 实现字符串匹配

JavaScript 提供了多种方法来实现字符串匹配,包括使用内置方法和正则表达式。

使用 String.prototype.includes() 方法

const str = "Hello, world!";
const substring = "world";
const isMatch = str.includes(substring); // true

includes() 方法检查字符串是否包含指定的子字符串,返回布尔值。

使用 String.prototype.indexOf() 方法

const str = "Hello, world!";
const substring = "world";
const position = str.indexOf(substring); // 7

indexOf() 方法返回子字符串首次出现的索引,未找到则返回 -1。

使用 String.prototype.match() 方法

const str = "Hello, world!";
const regex = /world/;
const result = str.match(regex); // ["world", index: 7, input: "Hello, world!"]

match() 方法使用正则表达式匹配字符串,返回匹配结果数组或 null。

使用 String.prototype.search() 方法

const str = "Hello, world!";
const regex = /world/;
const position = str.search(regex); // 7

search() 方法使用正则表达式搜索字符串,返回匹配的索引或 -1。

使用 RegExp.prototype.test() 方法

const str = "Hello, world!";
const regex = /world/;
const isMatch = regex.test(str); // true

test() 方法测试正则表达式是否匹配字符串,返回布尔值。

使用 RegExp.prototype.exec() 方法

const str = "Hello, world!";
const regex = /world/;
const result = regex.exec(str); // ["world", index: 7, input: "Hello, world!"]

exec() 方法在字符串中执行正则表达式搜索,返回匹配结果数组或 null。

正则表达式高级匹配

匹配多个结果

const str = "The rain in Spain falls mainly in the plain";
const regex = /ain/g;
const matches = str.match(regex); // ["ain", "ain", "ain"]

使用全局标志 g 可以匹配所有符合条件的子字符串。

使用捕获组

const str = "John Doe";
const regex = /(\w+)\s(\w+)/;
const result = regex.exec(str);
// ["John Doe", "John", "Doe", index: 0, input: "John Doe"]

圆括号 () 用于创建捕获组,匹配的子字符串会被单独返回。

不区分大小写匹配

const str = "Hello, World!";
const regex = /world/i;
const isMatch = regex.test(str); // true

使用 i 标志进行不区分大小写的匹配。

性能考虑

对于简单的子字符串检查,includes()indexOf() 通常比正则表达式更快。正则表达式适合更复杂的模式匹配场景。

字符串方法 vs 正则表达式

  • 字符串方法:简单、高效,适合固定子字符串匹配
  • 正则表达式:功能强大,适合模式匹配和复杂规则

实际应用示例

验证电子邮件格式

function isValidEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

提取URL中的域名

function getDomain(url) {
    const regex = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/;
    const match = url.match(regex);
    return match ? match[1] : null;
}

替换字符串中的模式

js实现匹配

const str = "The quick brown fox jumps over the lazy dog";
const newStr = str.replace(/fox/, "cat"); // "The quick brown cat jumps over the lazy dog"

标签: js
分享给朋友:

相关文章

js 实现vue

js 实现vue

实现 Vue 的核心功能 在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路: 响应式系统 通过 Object.define…

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…