javascript - 在 p 标签内指定字符位置添加一个 span 标签

有这样一段json数据 

let arrjson = [
  {
    tag1: { label: '轰隆隆', position: 0 },
    tag2: { label: '哗啦啦', position: 3 },
    tag3: { label: '汪汪汪', position: 14 },
    text: "雷声和雨声交织在一起，伴随着狗叫声，构成了一个美妙的夜晚。"
  },
  {
    tag1: { label: '轰隆隆', position: 0 },
    text: "雷声犹如天空的鼓点，敲打着大地，让人感受到大自然的力量。"
  },
  {
    text: "而雨滴打在地面上的声音，则如同一首优美的乐曲，让人陶醉其中。"
  }
]

 希望根据这段json生成这样的HTML

<div id="box"> 
     <p><span>轰隆隆</span>雷声和<span>哗啦啦</span>雨声交织在一起，伴随着<span>汪汪汪</span>狗叫声，构成了一个美妙的夜晚。</p>
     <P><span>轰隆隆</span>雷声犹如天空的鼓点，敲打着大地，让人感受到大自然的力量。</P>
     <P>而雨滴打在地面上的声音，则如同一首优美的乐曲，让人陶醉其中。</P>
</div>

同时渲染成这样

// 创建p标签
function createTags (arr) {
  let newDiv = document.getElementById('box')
  arr.forEach(element => {
    var newP = document.createElement('P')
    // 获取对象 element 的所有键，并使用 filter 方法筛选出包含 'tag' 的键，将筛选后的键存储在变量 newArr 中
    var newArr = Object.keys(element).filter(k => k.includes('tag'))
    newP.innerHTML = insertSpanTags(element, newArr)
    newDiv.appendChild(newP)
  });
}

// 插入span
function insertSpanTags(element, newArr) {
  let str = element.text
    for (var i = newArr.length - 1; i >= 0; i--) {
      // 根据 element[newArr[i]].label 创建一个 <span> 标签
      let spanTag = `<span style="background: #95feea;padding: 0 3px;">${element[newArr[i]].label}</span>`
      // 使用 slice 方法将 str 分割成两部分，并在中间插入 spanTag
      str = str.slice(0, element[newArr[i]].position) + spanTag + str.slice(element[newArr[i]].position);
    }
  return str;
}

createTags(arrjson)