元素部分高亮展示几天前面试的时候遇到了一道场景题，当时直接就懵了，想用正则，但是不会拼在这里记录一下😭 字符串：将下

几天前面试的时候遇到了一道场景题，当时直接就懵了，想用正则，但是不会拼在这里记录一下😭 字符串：将下列字符串高亮渲染到浏览器中, {{}}中文字高亮显示 (style="color:red")，{{}} 不要保留

function highlightText(str) {
  // 使用正则表达式匹配{{}}中的内容
  const regex = /{{([^}]+)}}/g;
  // 创建一个新的div元素
  const div = document.createElement('div');
  
  // 替换函数，用于将匹配到的文本高亮显示
  const replacer = (match, p1) => `<span style="color:red">${p1}</span>`;
  
  // 将原始字符串中的{{}}及其内容替换为高亮的span标签
  const highlightedStr = str.replace(regex, replacer);
  
  // 将高亮后的字符串设置为div的innerHTML
  div.innerHTML = highlightedStr;
  
  // 将div元素添加到body中，或者你可以选择添加到其他元素中
  document.body.appendChild(div);
}

// 示例用法
highlightText('这是一段示例文本，{{其中这段文字}}将会被高亮显示。');

展示效果：