如何使用Rangy Library为选中内容中的现有<div>标签添加类

我明白你的需求——默认情况下Rangy的ClassApplier会自动创建新的<span>来包裹选中内容，但你希望直接把类加到选中区域内已存在的<div>标签上对吧？咱们可以换个思路，不用applyToSelection，而是直接定位选中范围内的<div>元素来操作。

下面是修改后的代码，我会一步步解释：

var elem = document.getElementById('frame');
var sel = rangy.getSelection(elem);
var iframeWin = rangy.dom.getIframeWindow(elem);

// 先确保有选中内容
if (sel.rangeCount > 0) {
  // 获取第一个选中范围（大多数情况是单个连续选中）
  var targetRange = sel.getRangeAt(0);
  
  // 筛选出选中范围内所有的<div>元素
  var targetDivs = rangy.dom.getNodesInRange(targetRange, function(node) {
    // 只匹配<div>标签
    return node.nodeName.toLowerCase() === 'div';
  });
  
  // 遍历找到的<div>，添加目标类
  targetDivs.forEach(function(div) {
    div.classList.add('boldRed');
  });
}

关键细节说明： #

• rangy.dom.getNodesInRange是Rangy提供的实用方法，能帮我们快速获取指定范围内符合条件的节点，这里我们用它筛选<div>。
• 如果你的需求是只给完全被选中的
  添加类（而非部分重叠的），可以调整筛选逻辑，加上完全包含的判断：

  var targetDivs = rangy.dom.getNodesInRange(targetRange, function(node) {
    if (node.nodeName.toLowerCase() !== 'div') return false;
    // 第二个参数为true表示检查节点是否被范围完全包含
    return targetRange.containsNode(node, true);
  });
  

这种方式完全避开了自动创建<span>的逻辑，直接操作你页面中已有的<div>元素，完美符合你的需求~

内容的提问来源于stack exchange，提问作者xoanon