匹配多行段落文本的关键字，标红显示

匹配多行段落文本的关键字，标红表示

效果展示

背景

根据不同时间段的违规词（关键字），把不同时间段的违规词（关键字）标红显示（以下简称关键字）

参考事例（根据这个事例有的思路、倒推）

 const keywords = ['我', '吃', '的','这'];
 let content = '嗯，好，你们在吃饭，这不经常到酒没有，他一看不是二零二二年的，二零二三年，或者是你自带一瓶二零二二年前的，你听我说吧，还有三个，你到了年底，兄弟们，你到年底的时候，咱们就挣这么一年前就到年底要用了，是不是啊？关键时刻你到了年底之后，你自己带一瓶';
 for (const keyword of keywords) {
    const regExp = new RegExp(keyword, 'g'); // 添加 g 选项使匹配所有关键词
    content = content.replace(regExp, `<span style="color: red;">${keyword}</span>`); // 将匹配到的关键词用标签包裹
  }
 console.log('--content',content)

参考链接：
https://www.5axxw.com/questions/simple/6392o1
https://blog.csdn.net/weixin_47813845/article/details/128149540

核心点

1、拼凑多个相同时间段的关键字格式数组
2、一行段落匹配多个不连续的关键字
3、段落拼接展示

上代码

1、 将多个相同key的对象合并成一个对象数组

// 原始数组
let audio_detect_illegals = [
   {
     "start": "00:00",
     "end": "00:01",
     "word": "这"
   },
   {
       "start": "00:01",
       "end": "00:18",
       "word": "我"
   },
   {
       "start": "00:01",
       "end": "00:18",
       "word": "吃"
   },
   {
       "start": "00:01",
       "end": "00:18",
       "word": "的"
   },
   {
       "start": "00:01",
       "end": "00:18",
       "word": "这"
   }
]

// 目标数组
let audio_detect_illegals=[
   {
     "start": "00:00",
     "end": "00:01",
     word: ["这"]
   },
   {
     "start": "00:01",
     "end": "00:18",
     word: ["我", "吃", "的", "这"]
   },
   {
     "start": "00:18",
     "end": "00:30",
     word: ["我", "的", "这"]
   }
 ]

// 将数组中相同的时间段拼接成数组
var afterData = []
this.clueDetail.audio_detect_illegals.forEach(item=>{
  // 找到数组中是否有相同的时间段
  let flag = afterData.find(item1=>item1.start === item.start && item1.end === item.end)
  if(!flag){
    //没有相同的值
    afterData.push({
      start: item.start,
      end: item.end,
      word: [item.word]
    })
  }else{
    // 有相同的值
    flag.word.push(item.word)
  }
})
// 违规词数组
// console.log('---afterdata', afterData)

2、实现多行段落匹配多个不连续的关键字

(1) 业务代码

let newText = ''
this.clueDetail.audio_detect_sections.forEach(item=>{
  afterData.forEach(ill=>{
    if(item.time_start==ill.start&&item.time_end==ill.end){
      // 违规词的时间段和段落信息的时间段相等时，匹配红色关键字
      for (const keyword of ill.word) {
        const regExp = new RegExp(keyword, 'g'); // 匹配所有关键词
        item.text = item.text.replace(regExp, `<span style="color: red;">${keyword}</span>`); // 将关键字标红
      }
      // 有几条关键字 就显示几条替换的（控制台打印）
      // console.log('---item.text',item.text)
      // 不同的段落拼接渲染
      newText += `${item.time_start}-${item.time_end} ${item.text}\n`
    }
  })
})
// 不同的时间段换行展示
newText = newText.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
this.auditDetectHtml = newText

（2）控制台打印的每一时间段的关键字效果