如何使用 JavaScript 实现文本纠错结果的高亮显示？

纠错后结果文本高亮的实现方法

根据纠错识别返回的结果，可以对原始文本字符串进行替换，再使用 DOM API 嵌入 HTML 元素即可实现高亮效果。

具体步骤如下：

1. 解析返回的 JSON 数据。
2. 创建一个映射表，将纠错类型的关键值映射到 CSS 样式类名。
3. 遍历纠错结果，找出文本中的错误位置和内容。
4. 通过正则表达式替换错误内容，并用 HTML span 元素标记和指定 CSS 样式。

示例代码：

const resp = JSON.parse('{"leader":[],"org":[],"word": [[37, "主意", "注意", "word"]], "char": [], "redund": [[9, "色", "", "redund"]], "miss": [[9, "色色", "色黄色", "miss"]], "addr": [[0, "芸南市", "丰南市", "addr_S"]], "name": []}');
const styleMap = new Map([["leader", "css1"], ["org", "css2"], ["word", "css3"], ["char", "css4"], ["redund", "css5"], ["miss", "css6"], ["addr", "css7"], ["name", "css8"]]);
let content = '芸南市气象台暴雨橙色色预警信号，目前降雨云团已东北移，对芸南市影响减弱，请主意防范降水过后可能引发的次生灾害';

Object.keys(resp).forEach(key => resp[key].forEach(err => err[4] = key));
const errMap = new Map();
Object.keys(resp).flatMap(key => resp[key]).forEach((err) => {
  const idx = err[0];
  if (errMap.has(idx)) {
    if (errMap.get(idx)[1].length < err[1].length) {
      errMap.set(idx, err);
    }
  } else {
    errMap.set(idx, err);
  }
});
console.log(errMap);

[...errMap.entries()].forEach(([key, value]) => {
  content = content.replace(eval(`/${value[1]}/g`), `<span style="${styleMap.get(value[4])}">${value[1]}</span>`);
});

console.log(content);

以上就是如何使用 JavaScript 实现文本纠错结果的高亮显示？的详细内容，更多请关注其它相关文章！