Rangy如何实现多套文本高亮样式供用户选择使用？

算力阿峰

2026-9-28

Rangy 多套高亮样式切换实现方案

你可以直接按下面两种思路实现：

思路1：直接修改已有高亮节点的类名

提前在CSS中定义好所有需要的高亮样式类：

.highlight-yellow {
  background: #fff382;
  color: inherit;
}
.highlight-blue {
  background: #bae0ff;
  color: inherit;
}
.highlight-green {
  background: #b7f0b7;
  color: inherit;
}

你通过getHighlightForElement()获取到高亮对象后，直接遍历它关联的所有DOM元素替换类名即可：

// 点击的高亮元素为 clickedEl
const targetHighlight = rangy.getHighlightForElement(clickedEl);
// 遍历所有高亮包裹元素
targetHighlight.getHighlightElements().forEach(highlightNode => {
  // 移除旧样式类，添加新选中的样式类
  highlightNode.classList.remove('highlight-yellow');
  highlightNode.classList.add('highlight-blue');
});

思路2：用多ClassApplier实例实现切换（更稳定）

Rangy的ClassApplier本身就支持绑定不同类名，你可以提前为每套高亮样式初始化一个独立的ClassApplier实例，切换时先移除旧高亮再应用新高亮即可，不会出现DOM操作异常：

初始化多套高亮应用器

// 每个应用器对应一个高亮样式类
const yellowHighlighter = rangy.createClassApplier('highlight-yellow');
const blueHighlighter = rangy.createClassApplier('highlight-blue');
const greenHighlighter = rangy.createClassApplier('highlight-green');

切换高亮样式时的逻辑

const targetHighlight = rangy.getHighlightForElement(clickedEl);
// 获取当前高亮的选区范围
const highlightRange = targetHighlight.getRanges()[0];
// 移除旧样式高亮
yellowHighlighter.undoToRange(highlightRange);
// 应用新样式高亮
blueHighlighter.applyToRange(highlightRange);