released v1.0.1

.github/workflows/ci.yml

@@ -16,9 +16,94 @@ jobs:
       - run: npm install
       - run: npm run build
 
+      - name: Create Tag
+        id: create_tag
+        uses: jaywcjlove/create-tag-action@main
+        with:
+          package-path: ./package.json
+
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
           commit_message: ${{ github.event.head_commit.message }}
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./dist
+
+      - name: Generate Changelog
+        id: changelog
+        uses: jaywcjlove/changelog-generator@main
+        with:
+          filter-author: (小弟调调™)
+          filter: (^[\s]+?[R|r]elease)|(^[R|r]elease)
+
+
+      - name: Create Release
+        uses: ncipollo/release-action@v1
+        if: steps.create_tag.outputs.successful
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          name: ${{ steps.create_tag.outputs.version }}
+          tag: ${{ steps.create_tag.outputs.version }}
+          body: |
+
+            ${{ steps.changelog.outputs.compareurl }}
+            
+            ${{ steps.changelog.outputs.changelog }}
+
+            ## Docker
+            [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+
+            轻松通过 `docker` 部署 `Quick Reference` 网站。
+            
+            ```bash
+            docker pull wcjiang/reference
+            ```
+            
+            ```bash
+            docker run --name reference --rm -d -p 9667:3000 wcjiang/reference:latest
+            # Or
+            docker run --name reference -itd -p 9667:3000 wcjiang/reference:latest
+            ```
+            
+            在浏览器中访问以下 URL
+            
+            ```bash
+            http://localhost:9667/
+            ```
+
+      # Create Docker Image in Github
+      - name: Login to GitHub registry
+        run: echo ${{ github.token }} | docker login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      - name: Build docker image
+        run: docker build -t ghcr.io/jaywcjlove/reference:latest .
+
+      - name: Publish to GitHub registry
+        run: docker push ghcr.io/jaywcjlove/reference:latest
+
+      - name: Tag docker image (beta) and publish to GitHub registry
+        if: steps.create_tag.outputs.successful
+        run: |
+          echo "version: v${{ steps.changelog.outputs.version }}"
+          docker tag ghcr.io/jaywcjlove/reference:latest ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+          docker push ghcr.io/jaywcjlove/reference:${{steps.changelog.outputs.version}}
+
+      # Create Docker Image
+      - name: Docker login
+        run: docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+        
+      - name: Build reference image
+        run: docker image build -t reference .
+
+      - name: Tags & Push image(latest)
+        run: |
+          echo "DOCKER_USER: ${{ secrets.DOCKER_USER }}"
+          docker tag reference ${{ secrets.DOCKER_USER }}/reference:latest
+          docker push ${{ secrets.DOCKER_USER }}/reference:latest
+
+      - name: Tags & Push image
+        if: steps.create_tag.outputs.successful
+        run: |
+          echo "outputs.tag - ${{ steps.changelog.outputs.version }}"
+          docker tag reference ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}
+          docker push ${{ secrets.DOCKER_USER }}/reference:${{steps.changelog.outputs.version}}

Dockerfile

@@ -0,0 +1,7 @@
+# https://lipanski.com/posts/smallest-docker-image-static-website
+# https://github.com/lipanski/docker-static-website
+FROM lipanski/docker-static-website:latest
+
+# Copy the static website
+# Use the .dockerignore file to control what ends up inside the image!
+COPY ./dist .

README.md

@@ -1,6 +1,13 @@
 Quick Reference
 ===
 
+<!--rehype:ignore:start-->
+[![CI](https://github.com/jaywcjlove/reference/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/reference/actions/workflows/ci.yml)
+[![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+[![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+[![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+<!--rehype:ignore:end-->
+
 为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。
 
 如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。

docs/markdown.md

@@ -42,7 +42,7 @@ Header 2
 ```
 
 ### 无序列表
-<!--rehype:wrap-style=grid-row: span 2/span 2;-->
+<!--rehype:wrap-class=row-span-3-->
 
 ```markdown
 * Item 1
@@ -64,7 +64,7 @@ Header 2
 + Item 1
 + Item 2
 ```
-或者
+或者**任务**列表
 
 ```markdown
 - [ ] Checkbox off
@@ -80,41 +80,27 @@ Header 2
     b. item 3b
 ```
 
-
-
 ### 链接
 
 ```markdown
 [link](http://google.com)
-```
 
-```markdown
 [link][google]
 [google]: http://google.com
-```
 
-```markdown
 <http://google.com>
 ```
 
 ### 强调
 
 ```markdown
-*斜体*
+*斜体*    _斜体_    **粗体**   __粗体__
-_斜体_
-```
 
-```markdown
+`内联代码`  ~~删除~~
-**粗体**
-__粗体__
-```
-
-```markdown
-`内联代码`
-~~删除~~
 ```
 
 ### 水平线
+<!--rehype:wrap-class=row-span-2-->
 
 连字符
 
@@ -134,9 +120,15 @@ __粗体__
 ___
 ```
 
+### 换行
 
+```markdown
+在当前行的结尾加 2 个空格··
+这行就会新起一行\
+反斜杠也可以换行
+```
 
-
+尾部添加两个空格，或者添加 `\` 反斜杠
 
 ### 代码
 
@@ -165,33 +157,49 @@ console.log("This is a block code")
 ```
 
 ### 表格
-<!--rehype:wrap-style=grid-column: span 2/span 2;-->
 
 ```markdown
-|     左栏     |     中间栏     |     右栏     |
+|     左栏   |     中间栏     |  右栏     |
-|:------------|:-------------:|-------------:|
+| ----------| ------------ | --------- |
-| 单元格 1     |   居中         |        $1600 |
+| 单元格 1   |   居中        |     $1600 |
-| 单元格 2     |   单元格 3     |          $12 |
+| 单元格 2   |   单元格 3    |       $12 |
 ```
 
 简单的风格
 
 ```markdown
-    左栏     |     中间栏     |     右栏
+ 左栏 | 中间栏 | 右栏
-:----------:|:-------------:|:-----------:
+:-------: | :-------:|:-------:
-  单元格 1   |   居中         |    $1600
+单元格 1   | 居中      |    $1600
-  单元格 2   |   单元格 3     |     $12
+单元格 2   | 单元格 3  |     $12
 ```
 
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 
-### 图片
+### 脚注 (Footnotes)
-<!--rehype:wrap-style=grid-column: span 2/span 2;-->
 
 ```markdown
-![GitHub Logo](/images/logo.png)
+这是一个简单的脚注[^1]。
 
-![Alt Text](url)
+一个脚注也可以有多行[^2]。
+
+你也可以使用文字，更贴合你的写作风格[^note]。
+
+[^1]：我的参考。
+[^2]：每个新行都应以 2 个空格为前缀。
+  这允许你有一个多行的脚注。
+[^note]：
+    推荐使用数字命名脚注，但文本更容易识别和链接。
+    脚注使用了不同的语法，使用 4 个空格作为新行。
+```
+
+### 图片
+<!--rehype:wrap-class=col-span-2-->
+
+```markdown
+![图片名称](http://图片网址/images/logo.png)
+
+![替代文字](url)
 ```
 
 #### 带链接的图片
@@ -199,19 +207,19 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 ```markdown
 [![GitHub Logo](/images/logo.png)](https://github.com/)
 
-[![Alt Text](image_url)](link_url)
+[![替代文字](image_url)](link_url)
 ```
 
 #### 参考风格
 
 ```markdown
-![alt text][logo]
+![替代文字][logo]
 
 [logo]: /images/logo.png "Logo Title"
 ```
 
-
 ### 反斜杠转义
+<!--rehype:wrap-class=row-span-2-->
 
 | 字符 | 转义 | 描述 |
 |------------|--------|-------------|
@@ -227,3 +235,15 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 | \-         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
 | \.         | \\\.   | dot 点                      |
 | \!         | \\\!   | exclamation mark 感叹号      |
+
+### 行内 HTML 元素
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+目前只支持部分段内 HTML 元素效果，包括 <kdb>, <b>, <i>, <em>, <sup>, <sub>, <br>
+```
+
+另见
+----
+
+- [GitHub 风格的 Markdown 规范](https://github.github.com/gfm/) _(github.com)_

docs/quickreference.md

@@ -142,6 +142,8 @@ export const Student = (
   ```jsx {1,4-5}
 ```
 
+代码行高亮可以和代码行号一起使用。
+
 ### Tooltips
 
 [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_<!--rehype:tooltips-->
@@ -180,11 +182,15 @@ export const Student = (
 ### 代码行号
 
 ```jsx showLineNumbers
-export const Student = (
+export const Student = <div>学生</div>;
-  <div className="Student"></div>
+const school = <div>学校</div>;
-);
 ```
 
+下面是 `Markdown` 代码示例
+
+```markdown
+  ```jsx showLineNumbers
+```
 
 ### 内置类样式
 

docs/react.md

@@ -327,7 +327,7 @@ const Student = () => (
 
 从 `v16.2.0` 开始 `Fragment` 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 `<></>` 效果是一样的。
 
-```jsx
+```jsx {2,5}
 const Student = () => (
   <>
     <Avatar src="./demo.jpg" />
@@ -340,7 +340,7 @@ const Student = () => (
 
 ### 返回字符串
 
-```jsx
+```jsx {2}
 render() {
   return 'Look ma, no spans!';
 }
@@ -1011,12 +1011,313 @@ Menu.Item = ({ children }) => (
 <Menu>
 ```
 
-生命周期
----
-
 Hooks
 ---
 
+### Hooks API 参考
+<!--rehype:wrap-class=row-span-2-->
+
+#### 基础 Hook
+
+方法 | 描述
+:- | -
+`useState` | 返回一个 `state`，更新 `state` 的函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate)
+`useEffect` | 可能有副作用代码的函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect)
+`useContext` | 接收并返回该 `context` 的当前值 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext)
+
+#### 额外的 Hook
+
+方法 | 描述
+:- | -
+`useReducer` | `useState` 的替代方案 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate)
+`useCallback` | 返回一个回调函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback)
+`useMemo` | 返回一个 [memoized](https://en.wikipedia.org/wiki/Memoization) 值[#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo)
+`useRef` | 返回一个可变的 `ref` 对象 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useref)
+`useImperativeHandle` | 暴露给父组件的实例值 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle)
+`useLayoutEffect` | DOM 变更后同步调用函数 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect)
+`useDebugValue` | 开发者工具中显示标签 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue)
+`useDeferredValue` | 接受并返回该值的新副本 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue)
+`useTransition` | 过渡任务的等待状态 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition)
+`useId` | 用于生成唯一 ID [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#useid)
+
+#### Library Hooks
+
+方法 | 描述
+:- | -
+`useSyncExternalStore` | 读取和订阅外部数据源 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore)
+`useInsertionEffect` |  DOM 突变之前 同步触发 [#](https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore)
+
+### 函数式更新
+<!--rehype:wrap-class=col-span-2-->
+
+```jsx
+function Counter({ initialCount }) {
+  const [count, setCount] = useState(initialCount);
+  return (
+    <>
+      Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button>
+      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
+    </>
+  );
+}
+```
+
+### useRef
+
+```jsx
+function TextInputWithFocusButton() {
+  const $input = useRef(null);
+  const onButtonClick = () => {
+    $input.current.focus();
+  };
+  return (
+    <>
+      <input ref={$input} type="text" />
+      <button onClick={onButtonClick}>
+        聚焦输入
+      </button>
+    </>
+  );
+}
+```
+
+`current` 指向已挂载到 DOM 上的文本输入元素
+
+### useImperativeHandle
+
+```jsx
+function FancyInput(props, ref) {
+  const inputRef = useRef();
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current.focus();
+    }
+  }));
+  return <input ref={inputRef} />;
+}
+FancyInput = forwardRef(FancyInput);
+```
+
+父组件使用
+
+```jsx
+<FancyInput ref={inputRef} />
+inputRef.current.focus()
+```
+
+### useEffect
+
+```jsx
+useEffect(() => {
+  const subs = props.source.subscribe();
+  return () => {
+    subs.unsubscribe();
+  };
+}, [props.source]);
+```
+
+### useCallback
+
+```jsx
+const memoizedCallback = useCallback(
+  () => {
+    doSomething(a, b);
+  },
+  [a, b],
+);
+```
+
+### useMemo
+
+```jsx
+const memoizedValue = useMemo(
+  () => {
+    return computeExpensiveValue(a, b)
+  },
+  [a, b]
+);
+```
+
+### useId
+
+```jsx
+function Checkbox() {
+  const id = useId();
+  return (
+    <>
+      <label htmlFor={id}>
+        你喜欢React吗？
+      </label>
+      <input id={id} type="checkbox" />
+    </>
+  );
+};
+```
+
+用于生成跨服务端和客户端稳定的唯一 `ID` 的同时避免 `hydration` 不匹配
+
+### useDebugValue
+
+```jsx
+function useFriendStatus(friendID) {
+  const [
+    isOnline, setIsOnline
+  ] = useState(null);
+  // ...
+  // 在开发者工具中的这个 Hook 旁边显示标签
+  // e.g. "FriendStatus: Online"
+  useDebugValue(
+    isOnline ? 'Online' : 'Offline'
+  );
+  return isOnline;
+}
+```
+<!--rehype:className=wrap-text -->
+
+不推荐你向每个自定义 `Hook` 添加 `debug` 值
+
+### componentDidMount & componentWillUnmount
+
+```jsx
+useEffect(
+  () => {
+    // componentDidMount
+    // 组件挂载时，可以在这里完成你的任务
+    return () => {
+      // componentWillUnmount
+      // 卸载时执行，清除 effect
+    };
+  },
+  [ ]
+);
+```
+
+这是一个类似 `class` 组件中 `componentDidMount` & `componentWillUnmount` 两个生命周期函数的写法。
+
+生命周期
+---
+<!--rehype:body-class=cols-2-->
+
+### 挂载
+<!--rehype:wrap-class=row-span-2-->
+
+方法 | 描述
+:- | -
+`constructor` _(props)_  | 渲染前 [#](https://zh-hans.reactjs.org/docs/react-component.html#constructor)
+`static getDerivedStateFromProps()` | 调用 `render` 方法之前调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`render()`               |  `class` 组件中唯一必须实现的方法 [#](https://reactjs.org/docs/react-component.html#render)
+`componentDidMount()`    | 在组件挂载后(插入 DOM 树中)立即调用 [#](https://reactjs.org/docs/react-component.html#componentdidmount)
+`UNSAFE_componentWillMount()` | 在挂载之前被调用，建议使用 `constructor()` [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount)
+
+在 `constructor()` 上设置初始状态。在 `componentDidMount()` 上添加 DOM 事件处理程序、计时器（等），然后在 `componentWillUnmount()` 上删除它们。
+
+### 卸载
+
+方法 | 描述
+:- | -
+`componentWillUnmount()` | 在组件卸载及销毁之前直接调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentwillunmount)
+
+### 过时 API
+
+过时方法 | 新方法
+:- | -
+~~`componentWillMount()`~~ | `UNSAFE_componentWillMount()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillmount)
+~~`componentWillReceiveProps()`~~ | `UNSAFE_componentWillReceiveProps()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops)
+~~`componentWillUpdate()`~~ | `UNSAFE_componentWillUpdate()`  [#](https://zh-hans.reactjs.org/docs/react-component.html#unsafe_componentwillupdate)
+
+17+ 之后不再支持，在 `17` 版本之后，只有新的 `UNSAFE_` 生命周期名称可以使用。
+
+### 更新
+<!--rehype:wrap-class=col-span-2-->
+
+方法 | 描述
+:- | -
+`static getDerivedStateFromProps(props, state)` | 调用 `render` 之前调用，在初始挂载及后续更新时都会被调用 [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`shouldComponentUpdate(nextProps, nextState)` | 如果返回 `false`，则跳过 `render()` [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops)
+`render()` | 在不修改组件 `state` 的情况下，每次调用时都返回相同的结果 [#](https://zh-hans.reactjs.org/docs/react-component.html#render)
+`getSnapshotBeforeUpdate()` | 在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） [#](https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate)
+`componentDidUpdate()` | 这里使用 `setState()`，但记得比较 `props`。首次渲染不会执行此方法 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentdidupdate)
+
+### 错误处理
+<!--rehype:wrap-class=col-span-2-->
+
+方法 | 描述
+:- | -
+`static getDerivedStateFromError(error)` | 后代组件抛出错误后被调用，它将抛出的错误作为参数，并返回一个值以更新 `state` [#](https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror)
+`componentDidCatch(error, info)` | 在后代组件抛出错误后被调用，会在“提交”阶段被调用，因此允许执行副作用 [#](https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch)
+
+### render()
+
+```jsx {2}
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}</h1>;
+  }
+}
+```
+
+### constructor()
+
+```jsx {1}
+constructor(props) {
+  super(props);
+  // 不要在这里调用 this.setState()
+  this.state = { counter: 0 };
+  this.handleClick = this.handleClick.bind(this);
+}
+```
+
+### static getDerivedStateFromError()
+<!--rehype:wrap-class=row-span-2-->
+
+```jsx {7,13}
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // 更新 state 使下一次渲染可以显降级 UI
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // 你可以渲染任何自定义的降级  UI
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+### componentDidUpdate()
+
+```jsx {1}
+componentDidUpdate(prevProps) {
+  // 典型用法（不要忘记比较 props）：
+  if (this.props.uid !== prevProps.uid) {
+    this.fetchData(this.props.uid);
+  }
+}
+```
+
+### getSnapshotBeforeUpdate()
+
+```jsx
+getSnapshotBeforeUpdate(prevProps, prevState) {
+  // 我们是否在 list 中添加新的 items ？
+  // 捕获滚动​​位置以便我们稍后调整滚动位置。
+  if (prevProps.list.length < this.props.list.length) {
+    const list = this.listRef.current;
+    return list.scrollHeight - list.scrollTop;
+  }
+  return null;
+}
+```
 
 PropTypes 属性类型检查
 ---

docs/regex.md

@@ -65,7 +65,7 @@ RegEX 备忘清单
 - \$
 - \\
 - \?
-<!--rehype:className=cols-3-->
+<!--rehype:className=cols-3 style-none-->
 
 使用 `\` 转义这些特殊字符
 
@@ -175,6 +175,33 @@ RegEX 备忘清单
 `(?(?=...)yes\|no)`  | 有条件的前瞻
 `(?(?<=...)yes\|no)` | 有条件的往后看
 
+### 递归
+
+:-|-
+:-|-
+`(?R)`      | 递归整个模式
+`(?1)`      | 递归第一个子模式
+`(?+1)`     | 递归第一个相对子模式
+`(?&name)`  | 递归子模式`name`
+`(?P=name)` | 匹配子模式`name`
+`(?P>name)` | 递归子模式`name`
+
+### 标志/修饰符
+
+:-|-
+:-|-
+`g`   | 全部
+`m`   | 多行
+`i`   | 不区分大小写
+`x`   | 忽略空格
+`s`   | 单线
+`u`   | 统一码
+`X`   | 扩展
+`U`   | 不贪心
+`A`   | 锚
+`J`   | 重复的组名
+`d`   | 结果包含捕获组子字符串开始和结束的索引
+
 ### 零宽度断言
 
 :-|-
@@ -190,34 +217,6 @@ RegEX 备忘清单
 
 零宽度断言 允许您在主模式之前（向后看）或之后（lookahead）匹配一个组，而不会将其包含在结果中。
 
-### 标志/修饰符
-
-:-|-
-:-|-
-`g`   | 全球的
-`m`   | 多行
-`i`   | 不区分大小写
-`x`   | 忽略空格
-`s`   | 单线
-`u`   | 统一码
-`X`   | 扩展
-`U`   | 不贪心
-`A`   | 锚
-`J`   | 重复的组名
-
-
-### 递归
-
-:-|-
-:-|-
-`(?R)`      | 递归整个模式
-`(?1)`      | 递归第一个子模式
-`(?+1)`     | 递归第一个相对子模式
-`(?&name)`  | 递归子模式`name`
-`(?P=name)` | 匹配子模式`name`
-`(?P>name)` | 递归子模式`name`
-
-
 ### POSIX 字符类
 <!--rehype:wrap-class=col-span-2-->
 
@@ -287,6 +286,27 @@ RegEX 备忘清单
 使用 `\` 搜索这些特殊字符：<br> `[ \ ^ $ . | ? * + ( ) { }`
 
 
+### 速记类
+
+范例 | 说明
+:-|-
+`\w            ` | “单词”字符 <br> _(字母、数字或下划线)_ 
+`\d            ` | 数字 
+`\s            ` | 空格 <br> _(空格、制表符、vtab、换行符)_ 
+`\W, \D, or \S ` | 不是单词、数字或空格 
+`[\D\S]        ` | 表示不是数字或空格，两者都匹配 
+`[^\d\s]       ` | 禁止数字和空格 
+
+### 出现次数
+
+范例 | 说明
+:-|-
+`colou?r`           | 匹配 <yel>color</yel> 或 <yel>color</yel>
+`[BW]ill[ieamy's]*` | 匹配 <yel>Bill</yel>、<yel>Willy</yel>、<yel>William's</yel> 等。
+`[a-zA-Z]+`         | 匹配 1 个或多个字母
+`\d{3}-\d{2}-\d{4}` | 匹配 SSN
+`[a-z]\w{1,7}`      | 匹配 UW NetID
+
 ### 备择方案
 
 范例 | 说明
@@ -309,28 +329,6 @@ RegEX 备忘清单
 
 在 `[ ]` 中总是转义 `. \ ]` 有时是 `^ - .`
 
-
-### 速记类
-
-范例 | 说明
-:-|-
-`\w            ` | “单词”字符 <br> _(字母、数字或下划线)_ 
-`\d            ` | 数字 
-`\s            ` | 空格 <br> _(空格、制表符、vtab、换行符)_ 
-`\W, \D, or \S ` | 不是单词、数字或空格 
-`[\D\S]        ` | 表示不是数字或空格，两者都匹配 
-`[^\d\s]       ` | 禁止数字和空格 
-
-### 出现次数
-
-范例 | 说明
-:-|-
-`colou?r`           | 匹配 <yel>color</yel> 或 <yel>color</yel>
-`[BW]ill[ieamy's]*` | 匹配 <yel>Bill</yel>、<yel>Willy</yel>、<yel>William's</yel> 等。
-`[a-zA-Z]+`         | 匹配 1 个或多个字母
-`\d{3}-\d{2}-\d{4}` | 匹配 SSN
-`[a-z]\w{1,7}`      | 匹配 UW NetID
-
 ### 贪婪与懒惰
 
 范例 | 说明
@@ -340,7 +338,6 @@ RegEX 备忘清单
 `*?  +? {n,}?`<br>_lazy_ | 尽可能少匹配
 `<.+?>`                  | 在 \<<yel>b</yel>>bold\<<yel>\/b</yel>> 中找到 2 个匹配项
 
-
 ### 范围
 <!--rehype:wrap-class=col-span-2-->
 
@@ -370,7 +367,6 @@ RegEX 备忘清单
 `(?-x)`             | 自由空间模式关闭
 /regex/`ismx`       | 修改整个字符串的模式
 
-
 ### 组
 
 范例 | 说明
@@ -394,7 +390,7 @@ RegEX 备忘清单
 
 范例 | 说明
 :-|-
-`on(?:click\|load)` | 快于：<br>`on(click\|load)`
+`on(?:click\|load)` | 快于：`on(click\|load)`
 
 尽可能使用非捕获或原子组
 
@@ -543,8 +539,11 @@ M(?(?=.*?\bher\b)s|r)\.
 如果想要匹配句子中的 `.` 则要写成 `\.` 以下这个例子 `\.?` 是选择性匹配.
 
 ### 锚点
+<!--rehype:wrap-class=row-span-2-->
 
-#### `^` 号
+匹配指定开头或结尾的字符串就要使用到锚点。
+
+#### `^` 号 (符串的开头)
 
 表达式 | 匹配示例
 :- | -
@@ -552,32 +551,32 @@ M(?(?=.*?\bher\b)s|r)\.
 `^(T\|t)he` | `The` car is parked in the garage.
 <!--rehype:className=show-header-->
 
-#### `$` 号
+#### `$` 号 (否是最后一个)
 
 表达式 | 匹配示例
 :- | -
 `(at\.)` | The fat c`at.` s`at.` on the m`at.`
-`(at\.)$` | The fat cat. sat. on the m`at`.
+`(at\.)$` | The fat cat. sat. on the m`at.`
 <!--rehype:className=show-header-->
 
 ### 简写字符集
-<!--rehype:wrap-class=row-span-3-->
+<!--rehype:wrap-class=row-span-4-->
 
 |简写|描述|
 |:----:|----|
 |`.`|除换行符外的所有字符|
-|`\w`|匹配所有字母数字，等同于 `[a-zA-Z0-9_]`|
+|`\w`|匹配所有字母数字<br />等同于 `[a-zA-Z0-9_]`|
-|`\W`|匹配所有非字母数字，即符号，等同于： `[^\w]`|
+|`\W`|匹配所有非字母数字，即符号<br />等同于： `[^\w]`|
 |`\d`|匹配数字： `[0-9]`|
 |`\D`|匹配非数字： `[^\d]`|
-|`\s`|匹配所有空格字符，等同于： `[\t\n\f\r\p{Z}]`|
+|`\s`|匹配所有空格字符<br />等同于：`[\t\n\f\r\p{Z}]`|
 |`\S`|匹配所有非空格字符： `[^\s]`|
 |`\f`|匹配一个换页符|
 |`\n`|匹配一个换行符|
 |`\r`|匹配一个回车符|
 |`\t`|匹配一个制表符|
 |`\v`|匹配一个垂直制表符|
-|`\p`|匹配 CR/LF（等同于 `\r\n`），用来匹配 DOS 行终止符|
+|`\p`|匹配 CR/LF(等同于 `\r\n`)<br />用来匹配 DOS 行终止符|
 <!--rehype:className=show-header-->
 
 正则表达式提供一些常用的字符集简写。
@@ -756,6 +755,38 @@ False
 JavaScript 中的正则表达式
 ---------------
 
+### RegExp
+<!--rehype:wrap-class=row-span-4-->
+
+#### 属性
+
+:- | :-
+:- | :-
+`dotAll` | 是否使用了 `s` 修饰符
+`flags` | 返回标志的字符串
+`global` | 是否使用了 `g` (全部)修饰符
+`hasIndices` | 是否使用了 `d` 修饰符
+`ignoreCase` | 匹配文本的时候是否忽略大小写 `i`
+`multiline` | 是否进行多行搜索 `m`
+`lastIndex` | 该索引表示从哪里开始下一个匹配
+`source` | 正则表达式的文本
+`sticky` | 搜索是否是 sticky
+`unicode` | Unicode 功能是否开启
+
+#### 方法
+
+:- | :-
+:- | :-
+`match()` | 获取匹配结果
+`matchAll()` | 所有匹配项
+`replace()` | 替换所有符合正则模式的匹配项
+`search()` | 搜索以取得匹配正则模式的项
+`split()` | 切割字符串返回字符串数组
+~~`compile()`~~ | （重新）编译正则表达式
+`exec()` | 指定字符串中执行一个搜索匹配
+`test()` | 正则表达式与指定的字符串是否匹配
+`toString()` | 返回该正则表达式的字符串
+
 ### test()
 
 ```javascript
@@ -763,11 +794,8 @@ let textA = 'I like APPles very much';
 let textB = 'I like APPles';
 let regex = /apples$/i
  
-// Output: false
+console.log(regex.test(textA)); // false
-console.log(regex.test(textA));
+console.log(regex.test(textB)); // true
- 
-// Output: true
-console.log(regex.test(textB));
 ```
 
 ### search()
@@ -777,28 +805,21 @@ let text = 'I like APPles very much';
 let regexA = /apples/;
 let regexB = /apples/i;
 
-// Output: -1
+console.log(text.search(regexA)); // -1
-console.log(text.search(regexA));
+console.log(text.search(regexB)); // 7
- 
-// Output: 7
-console.log(text.search(regexB));
 ```
 
-
 ### exec()
 
 ```javascript
 let text = 'Do you like apples?';
 let regex= /apples/;
- 
 // Output: apples
 console.log(regex.exec(text)[0]);
- 
 // Output: Do you like apples?
 console.log(regex.exec(text).input);
 ```
 
-
 ### match()
 
 ```javascript
@@ -809,7 +830,6 @@ let regex = /apples/gi;
 console.log(text.match(regex));
 ```
 
-
 ### split() 
 <!--rehype:wrap-class=col-span-2-->
 
@@ -844,15 +864,33 @@ let result = text.replace(regex, 'mangoes');
 console.log(result);
 ```
 
+### 属性示例
+
+```javascript
+/d/s.dotAll;             // => true
+/d/g.global;             // => true
+/d/ig.flags;             // => "gi"
+/d/d.hasIndices;         // => true
+/d/i.ignoreCase;         // => true
+```
+
+### 多行文本中使用正则表达式
+
+```js
+let s = "Please yes\nmake my day!";
+
+s.match(/yes[^]*day/);
+// 返回 'yes\nmake my day'
+```
 
 ### replaceAll()
 
 ```javascript
 let regex = /apples/gi;
 let text = 'Here are apples and apPleS';
-// Output: Here are mangoes and mangoes
+
-let result = text.replaceAll(regex, "mangoes");
+text.replaceAll(regex, "mangoes");
-console.log(result);
+// 返回: Here are mangoes and mangoes
 ```
 <!--rehype:className=wrap-text-->
 
@@ -879,6 +917,7 @@ PHP中的正则表达式
 ```php
 $str = "Visit Microsoft!";
 $regex = "/microsoft/i";
+
 // Output: Visit QuickRef!
 echo preg_replace($regex, "QuickRef", $str); 
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reference",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",

scripts/style.css

@@ -808,6 +808,9 @@ body:not(.home) .h2wrap > h2 a::after {
   .header-nav .max-container {
     padding-top: 0.85rem;
   }
+  .header-nav .menu a, .header-nav .menu button {
+    padding: 0.2rem 0.3rem;
+  }
   .wrap-header.h1wrap > h1 {
     margin-bottom: 2rem;
     font-size: 2rem;
@@ -816,15 +819,18 @@ body:not(.home) .h2wrap > h2 a::after {
     margin-top: 1.6rem;
     margin-bottom: 2rem;
   }
+  .wrap-header.h2wrap > h2 {
+    font-size: 1.3rem;
+  }
+  .wrap-header.h3wrap > .wrap-body {
+    overflow: auto;
+  }
   .h1wrap-body {
     gap: 2rem;
   }
   .home-card {
     gap: 1rem;
   }
-  .wrap-header.h2wrap > h2 {
-    font-size: 1.3rem;
-  }
   a.home-button {
     padding-left: 1.1rem;
     padding-right: 1.1rem;