寻求匹配单个单词的TipTap InputRule正则表达式解决方案

要实现输入文本时自动给单个单词添加<w>标签，关键是编写正确的InputRule正则和处理逻辑，避免空格被吞或文本合并的问题。

正确的自定义节点代码 #

import { Node } from '@tiptap/core'

export const WordNode = Node.create({
  name: 'word',
  group: 'inline',
  inline: true,

  parseHTML() {
    return [{ tag: 'w' }]
  },

  renderHTML({ HTMLAttributes }) {
    return ['w', HTMLAttributes, 0]
  },

  addInputRules() {
    return [
      this.inputRule({
        // 匹配行首或空格后的单词，以及末尾的空格
        regex: /(?:^|\s)([^\s]+)\s$/,
        // 替换逻辑：生成<w>节点并保留空格
        replace: (match) => [
          { type: this.type, content: match[1] },
          ' ',
        ],
      }),
    ]
  },
})

注册到编辑器 #

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { WordNode } from './extensions/ext-wordnode.js'

const editor = new Editor({
  element: document.querySelector('.editor'),
  extensions: [StarterKit, WordNode],
})

之前正则的问题分析 #

• /\b\w+\b\s$/：\b边界匹配在非纯英文场景可能失效，且未明确区分单词和空格，替换时易丢失空格导致文本合并。
• /\b([^\s]+)\b$/g：全局标志g不适用于InputRule，且未匹配空格，触发时机错误（未输入空格就触发）。
• /\b([^\s]+)(?:\b)\s$/：未在替换逻辑中保留空格，导致空格被吞，需要手动在替换时补充空格。

核心逻辑说明 #

1. 正则/(?:^|\s)([^\s]+)\s$/确保在用户输入空格完成一个单词时触发规则，匹配行首或空格后的单词，以及末尾的空格。
2. 替换时将捕获到的单词生成<w>节点，同时保留空格，避免后续输入的文本和已有单词合并。

内容的提问来源于stack exchange，提问作者Bene