获取多个有标签文字的位置/给多个指定位置文字包上标签

应用场景：一段文字中的多个文字有包上标签，需要拿到包上标签文字起始位置的下标，位置不含标签。

实现思路：正则匹配到每个包上标签的的文字，依次减去前面有包标签的长度即可

 <div className='txt'>这是<em>一段要获取</em>包有<em>标签</em>文字<em>位置</em>的句子</div>

  const getTxtIndex = () => {
    let newPoint = []
    const el = document.getElementById('txt')||''
    let pattern = /<(\em)[^>]*>((.*?)<\/\1>)/g 
    let i = 0
    let m
    while ((m = pattern.exec(el.innerHTML)) != null) {
      let start = m.index - i
      let end = start + m[3].length
      i += 9 //<em></em>标签字符的长度
      newPoint.push({content: m[3],start,end}) // 获取的是去除标签的起始位置的下标
    }
    return newPoint
  }

  getTxtIndex() //

应用场景：给一段文字中的其中文字高亮，只有文字的起始位置的下标。

实现思路：当包上第一个标签后，文字的位置就会发生变化，后面再包位置就会不准，较简单的实现思路是先将位置倒序排序，从后往前包即可

const txtAddTag = (list = [], innerHTML = '') => {
  list = list.sort((a, b) => b.start - a.start) //倒序 从后往前包标签更方便
  for (let item of list) {
    let { start, end } = item
    let before = innerHTML.substring(0, start)
    let hitContent = innerHTML.substring(start, end)
    let after = innerHTML.substring(end, innerHTML.length)
    innerHTML = before + '<em>' + hitContent + '</em>' + after
  }
  return innerHTML
}

const list = [{ start: 1, end: 4 }, { start: 6, end: 8 }, { start: 13, end: 16 }]
txtAddTag(list, '这是一段要给指定位置的文字包上标签的句子')