正则判断中文字符

1，需求

按钮文字如果是2个中文，则文字间增加空格。

对比效果：

2，解决思路

样式问题比较简单，关键问题是如何判断内容是2个文字？

在组件中定义一个计算属性。

import { useSlots, computed, Text } from "vue";

const slots = useSlots()
// 组件内容只有文字时，获取默认插槽内容。
const shouldAddSpace = computed(() => {
  const defaultSlot = slots.default?.()
  if (defaultSlot?.length === 1) {
    const slot = defaultSlot[0]
    if (slot?.type === Text) { // Text 文字类型
      const text = slot.children // 插槽内容
      return /^\p{Unified_Ideograph}{2}$/u.test(text.trim()) // 正则判断
    }
  }
  return false
})

2.1，正则表达式含义

/^\p{Unified_Ideograph}{2}$/u.test(text.trim())

• ^ 表示匹配字符串的开始位置。
• \p{Unified_Ideograph} 是一个Unicode属性转义，用于匹配一个统一表意文字。这个属性包含了所有的Unicode统一表意文字。
• {2} 表示前面的模式匹配需要出现两次，即需要匹配两个统一表意文字。
• $ 表示匹配字符串的结束位置。
• u 标志表示使用Unicode模式匹配。

1，表意文字

包括汉字，日文，韩文等东亚文字。

2，Unicode模式匹配

通过在正则表达式的末尾添加 u 标志来启用Unicode模式。

启用Unicode模式后，正则表达式将以Unicode代码点的方式进行匹配，而不仅仅是单个字符。这对于处理Unicode字符集中的字符特别有用，因为Unicode字符集非常广泛，包含了全球各种语言的字符、符号和表意文字。

在Unicode模式下，一些特殊的正则表达式语法和属性转义可用于匹配Unicode字符。例如，使用\p{}来匹配Unicode属性，如\p{Letter}匹配任何Unicode字母字符。

启用Unicode模式后，还可以使用\uXXXX语法来匹配特定的Unicode字符，其中XXXX是四个十六进制数字表示的Unicode代码点。

总而言之，Unicode模式使得正则表达式能够更好地处理和匹配Unicode字符集中的字符，提供了更强大和灵活的匹配能力。

3，属性转义 \p{Unified_Ideograph}

属性转义（Property Escape）是正则表达式中的一种特殊语法，用于匹配具有特定属性的字符。

在正则表达式中，属性转义以 \p{PropertyName} 的形式表示，其中 PropertyName 是一个属性名称，用于指定要匹配的字符的属性。

属性转义 \p{Unified_Ideograph} 可以匹配一个统一表意文字。当使用 Unicode 模式 (u 标志) 时，它可以正确匹配所有统一表意文字字符，而不仅仅是单个字符。

所以，下面的正则表达式，用于测试字符串是否仅由两个统一表意文字组成。

/^\p{Unified_Ideograph}{2}$/u

另外，属性转义可以用于匹配特定的字符类别，如字母、数字、标点符号等。它们还可以用于匹配特定脚本、语言或字符集中的字符，如拉丁字母、希腊字母、汉字等。

属性转义通常与 Unicode 模式 (u 标志) 结合使用，以确保正则表达式正确处理 Unicode 字符。

一些常见的属性转义包括：

• \p{L}：匹配任何字母字符。
• \p{N}：匹配任何数字字符。
• \p{P}：匹配任何标点符号字符。
• \p{Sc}：匹配任何货币符号字符。
• \p{Script=…}：匹配特定脚本（如 \p{Script=Latin} 匹配拉丁字母）。
• \p{General_Category=…}：匹配特定的一般类别（如 \p{General_Category=Letter} 匹配任何字母字符）。

以上。