包含在 jquery 选择器中的 Rangy 范围

Rangy range contained within a jquery selector

本文关键字：Rangy 范围 选择器 jquery 包含      更新时间：2023-09-26

我正在围绕Rangy JavaScript插件开发JavaScript包装器。我想做的是：给定一个jQuery选择器和一个范围，检测范围是否包含在选择器中。这是针对一个空间，用户可以在其中阅读文档并能够对特定部分进行评论。所以我有一个包含文档的div id="viewer"，我有一个按钮区域，在用户选择一些文本后执行操作。这是(损坏的(函数：

function selectedRangeInRegion(selector) {
    var selectionArea = $(selector);
    var range = rangy.getSelection().getRangeAt(0);
    var inArea = (selectionArea.has(range.startContainer).length > 0);
    if (inArea) {
        return range;
    } else {
        return null;
    }
}

似乎selectionArea.has(range.startContainer)返回一个大小为 0 的数组。我试过像这样包装：$(range.startContainer).有什么提示吗？

我为这个问题开发了一个解决方案。这假设您有一个div 选择器，并且您的内容没有任何div：

function containsLegalRange(selector, range) {
  var foundContainingNode = false;
  var container = range.commonAncestorContainer
  var nearestDiv = $(container).closest("div");    
  if (nearestDiv.attr("id") == selector) {
    return true
  }
  else {
    return false
  }
}

这不是has()的工作方式：传递给它的参数是选择器字符串或 DOM 元素，而range.startContainer是一个 DOM 节点，实际上可能是文本节点或元素。

我不认为会有一种方法像你希望的那样容易。以下是我能想到的简单。

js小提琴：http://jsfiddle.net/TRVCm/

法典：

function containsRange(selector, range, allowPartiallySelected) {
    var foundContainingNode = false;
    $(selector).each(function() {
        if (range.containsNode(this, allowPartiallySelected)) {
            foundContainingNode = true;
            return false;
        }
    });
    return foundContainingNode;
}

.has(( 有时可能很奇怪，并在不应该产生.length == 0时产生。请尝试以下方式：

function selectedRangeInRegion(selector) {
  var range = rangy.getSelection().getRangeAt(0);
  var selectionArea = selector + ':has(''' + range.startContainer + ''')';
  var inArea = $(selectionArea).length > 0);
  if (inArea) {
    return range; 
  }
  else {
    return null;
  }
}
相关文章：