regex-lab-notes-js

Regex Lab 学习笔记 — JavaScript

字符串

• 单引号 '…' 和双引号 "…" 都是普通字符串。
• 反引号 `…` 是模板字符串，支持 ${} 插值。
• 示例：

resultHeader.textContent = `匹配结果 ${matchArray.length} 处`;

• 下面这种不会插值，因为它只是普通字符串：

resultHeader.textContent = "匹配结果 ${matchArray.length} 处";

数组遍历与 forEach

• forEach 是数组的内置遍历方法，用来对每个元素执行一次操作。
• 参数顺序固定：

array.forEach((element, index, array) => {
    // element: 当前元素
    // index: 当前索引
    // array: 原数组
});

• 只能省略后面的参数，不能交换顺序。
• matchArray.forEach(…) 是对的，matchArray.array.forEach(…) 是错的，因为 matchArray 本身就是数组。
• 注意大小写：正确写法是 forEach，不是 foreach。

正则表达式与匹配

• matchAll() 必须配合 g 标志使用，否则会报错。
• 处理方式有两种：
  • 内部强制追加 g
  • 没有 g 时改用 exec()
• m 是多行模式，让 ^ 和 $ 匹配每一行的开头和结尾，而不是整个字符串的开头和结尾。
• 例子：

^TODO\s.*

• 配合 m 可以匹配每一行开头的 TODO。

replace() 与捕获组

• String.prototype.replace() 的替换字符串支持特殊语法：
  • $1 第一个捕获组
  • $2 第二个捕获组
  • $& 整个匹配
• 所以：

$1****$2

• 能正确引用分组内容。
• 但 \n 不是 replace() 自动识别的特殊替换语法，用户输入 \n 时，默认只会显示字面量 \n。
• 如果想让 \n 变成真正换行，需要先手动处理字符串：

function processString(text) {
    return text
        .replace(/\\n/g, '\n')
        .replace(/\\t/g, '\t')
        .replace(/\\r/g, '\r');
}

• 这个函数命名如果只是表达”处理字符串”，可以用：processString。

错误处理

• new RegExp(pattern, flags) 如果遇到非法表达式会抛错，例如末尾多了一个反斜杠：

Invalid regular expression: \ at end of pattern

• 更好的方式不是只返回 null，而是把错误信息一起返回：

function buildRegExp(textPattern, formFlagsData) {
    let flags = '';
 
    for (const [name, value] of formFlagsData) {
        if (value) {
            flags += name;
        }
    }
 
    try {
        const regex = new RegExp(textPattern, flags);
        return { regex, error: null };
    } catch (e) {
        return { regex: null, error: e.message };
    }
}

• 这样调用方可以直接显示错误提示，而不是只在控制台里看见异常。

JS 对象与 JSON

• { regex, error: null } 是 JavaScript 对象，不是 JSON。
• JSON 是一种文本格式，键必须加双引号。
• JavaScript 对象可以直接在代码里使用，JSON 更适合存储和传输。

className 与 classList

• className 是字符串，操作整个 class 属性。
• classList 是对象，适合增删切换单个类名。
• 日常推荐用 classList：

element.classList.add('error');
element.classList.remove('error');
element.classList.toggle('active');

读取表单与复选框

• 复选框要保证每个 id 唯一。
• 读取单个复选框的勾选状态：

document.getElementById('flag-g').checked

• 如果使用 <form>，也可以配合 FormData 统一读取。

DOM 与事件常见问题

• document.querySelector('#replace-input') 需要带 #，否则会拿不到元素。
• createElement 必须写成：

document.createElement('div')

• offsetWidth 表示元素当前渲染出来的宽度，包含 width + padding + border，不包含 margin。
• 拖拽调整宽度时：

startWidth = divEditorPanel.offsetWidth;

• mousedown 事件中没有 startX 属性，应该用 clientX：

startX = e.clientX;

• divEditorPanel.style.width = newWidth + 'px'; 是给元素设置内联样式，前提是 newWidth 必须是有效数字。

本轮排查过的 JS 典型错误

• foreach is not a function：forEach 大小写写错。
• createElement is not defined：漏写 document.。
• Cannot read properties of null：选择器写错，或元素不存在。
• Assignment to constant variable：对 const 声明的变量重新赋值。
• Invalid regular expression：用户输入的正则语法错误。