JavaScript中如何简便拆分字符串并提取特定符号开头的内容

• 待处理示例字符串：Hey @eli check out this link: https://stackoverflow.com
• 目标输出：将字符串拆分为带类型标记的结构化数组，区分普通文本、@提及、#话题、链接等片段，方便后续做样式添加、元素包裹等处理，目标结构示例：

[{type: 'text', content: 'Hey '}, {type: 'mention', content: '@eli'}, {type: 'text', content: ' check out this link: '}, {type: 'href', content: 'https://stackoverflow.com'}]

• 原有实现问题：通过多层嵌套调用split()做拆分，逻辑冗余、嵌套层级深，后续扩展新的匹配规则改动成本高，还容易出现拆分错位、多余字符的问题。原有实现代码如下：

const valueAsArray = []
    value.split(/\r?\n/).forEach((line) => {
      if (line) {
        const line_: Line[] = [];
        line.split(' ').forEach((space, i) => {
          space.split('@').forEach((mention, i) => {
            if (i === 0) {
              mention.split('#').forEach((hashtag, i) => {
                if (i === 0) {
                  line_.push({ type: 'text', content: hashtag });
                } else {
                  line_.push({ type: 'hashtag', content: `#${hashtag}` });
                }
              });
            } else {
              line_.push({ type: 'mention', content: `@${mention}` });
            }
          });
          line_.push({ type: 'text', content: ' ' });
        });
        valueAsArray.push({ type: 'line', content: line_ });
      } else {
        valueAsArray.push({ type: 'spacer' });
      }
    });

不要用多层split嵌套，用正则全局匹配+游标记录位置的方案实现，逻辑清晰易扩展。

核心逻辑 #

1. 先按行拆分字符串，保留换行生成的空行占位
2. 对每一行文本，把所有需要识别的特殊片段规则整合到一个带全局匹配标识的正则里，目前支持@提及、#话题、http/https链接，后续要加新规则直接补正则即可
3. 遍历所有正则匹配结果，用游标记录上一次处理结束的位置：
   • 匹配位置和游标之间的内容是普通文本，先推入结果
   • 根据匹配到的内容前缀判断片段类型，推入对应结构的特殊片段
   • 更新游标到本次匹配结束的位置
4. 所有匹配处理完成后，把游标到行尾剩余的普通文本推入结果

可直接运行的代码 #

function parseStructuredContent(value) {
  const result = []
  // 按行拆分
  value.split(/\r?\n/).forEach(line => {
    if (!line) {
      result.push({ type: 'spacer' })
      return
    }
    const fragments = []
    // 匹配规则：@提及 / #话题 / 链接，可按需扩展
    const reg = /(@[^\s@]+)|(#[^\s#]+)|(https?:\/\/[^\s]+)/g
    let cursor = 0
    let matchItem = null
    while ((matchItem = reg.exec(line)) !== null) {
      // 存入匹配前的普通文本
      if (matchItem.index > cursor) {
        fragments.push({
          type: 'text',
          content: line.slice(cursor, matchItem.index)
        })
      }
      // 判断匹配内容类型
      const content = matchItem[0]
      if (content.startsWith('@')) {
        fragments.push({ type: 'mention', content })
      } else if (content.startsWith('#')) {
        fragments.push({ type: 'hashtag', content })
      } else if (content.startsWith('http')) {
        fragments.push({ type: 'href', content })
      }
      // 移动游标
      cursor = reg.lastIndex
    }
    // 存入末尾剩余的普通文本
    if (cursor < line.length) {
      fragments.push({
        type: 'text',
        content: line.slice(cursor)
      })
    }
    result.push({ type: 'line', content: fragments })
  })
  return result
}

// 测试
const testText = 'Hey @eli check out this link: https://stackoverflow.com'
console.log(parseStructuredContent(testText))

方案优点 #

• 无多层嵌套循环，逻辑线性直白，维护成本低
• 扩展新的匹配类型只需要修改正则、加一个类型判断分支即可，不需要改动整体流程
• 不会出现原有split实现里多余空格、特殊字符拆分错位的问题，匹配精度更高
• 仅需一次正则遍历，性能优于多层split嵌套的实现

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