js-正则循环匹配数据

1. 描述

将给定的字符串进行分组。

2. 代码

/*
 * str: 需要处理的字符串
 * regexp: 正则表达式
 * matchedType: 给匹配到的数据设置类型，`image` / `emoji` 等标识
 * notMatchedType: 没有匹配到的数据的类型
 */
const matchImgTag = (str, regexp, matchedType, notMatchedType = 'text') => {
  let match
  const matched = []
  while ((match = regexp.exec(str)) !== null) {
    const text = match[0]
    // 第一次进来 并且首次匹配的不在开头
    if (!matched.length && match.index !== 0) {
      matched.push({
        type: notMatchedType,
        start: 0,
        end: match.index,
        text: str.slice(0, match.index)
      })
    }
    // 两次匹配中间的部分
    if (matched[matched.length - 1].end !== match.index) {
      matched.push({
        type: notMatchedType,
        start: matched[matched.length - 1].end,
        end: match.index,
        text: str.slice(matched[matched.length - 1].end, match.index)
      })
    }
    // 新匹配的部分
    matched.push({
      type: matchedType,
      start: match.index,
      end: match.index + text.length,
      text: str.slice(match.index, match.index + text.length)
    })
  }
  // 一个都没有匹配到
  if (!matched.length) {
    matched.push({
      type: notMatchedType,
      start: 0,
      end: str.length,
      text: str.slice(0, str.length)
    })
  }
  // 最后结尾部分
  if (matched.length && matched[matched.length - 1].end !== str.length) {
    matched.push({
      type: notMatchedType,
      start: matched[matched.length - 1].end,
      end: str.length,
      text: str.slice(matched[matched.length - 1].end, str.length)
    })
  }
  return matched
}

3. 示例

1. 例如将字符串中的img标签位置检索出来，替换相应的url

// 给定字符串
const str = `<p><img src="sdsdssd" alt="sdsd"/>ssdsd<img src="sdddd" alt="sdsxx"/></p>`

// 给定正则
const regexp = /<img(.*?)\/>/g

// 调用函数
const matchArr = matchImgTag(str, regexp, 'image', 'text')

// matchArr 结果：
[
  { type: 'text', start: 0, end: 3, text: '<p>' },
  {
    type: 'image',
    start: 3,
    end: 34,
    text: '<img src="sdsdssd" alt="sdsd"/>'
  },
  { type: 'text', start: 34, end: 39, text: 'ssdsd' },
  {
    type: 'image',
    start: 39,
    end: 69,
    text: '<img src="sdddd" alt="sdsxx"/>'
  },
  { type: 'text', start: 69, end: 73, text: '</p>' }
]

2. 例如将字符串中的[[]]标签位置检索出来，这里[[]]里面的内容可能代表相应的表情符号

// 给定字符串
const str = '今天天气真好啊[[微笑]]，我们出去玩吧[[愉快]][[愉快]][[愉快]]。'

// 给定正则
const regexp = /\[\[(.*?)\]\]/g

// 调用函数
const matchArr = matchImgTag(str, regexp, 'emoji', 'text')

// matchArr 结果：
[
  { type: 'text', start: 0, end: 7, text: '今天天气真好啊' },
  { type: 'emoji', start: 7, end: 13, text: '[[微笑]]' },
  { type: 'text', start: 13, end: 20, text: '，我们出去玩吧' },
  { type: 'emoji', start: 20, end: 26, text: '[[愉快]]' },
  { type: 'emoji', start: 26, end: 32, text: '[[愉快]]' },
  { type: 'emoji', start: 32, end: 38, text: '[[愉快]]' },
  { type: 'text', start: 38, end: 39, text: '。' }
]

3. …