使用 JQuery 检查所选文本是否是较大节点的一部分答案

【问题标题】：Checking whether selected text is part of a larger node with JQuery使用 JQuery 检查所选文本是否是较大节点的一部分
【发布时间】：2012-04-09 12:10:23
【问题描述】：

我正在使用 JQuery 编写一个文档编辑器，并且已经实现了基本的格式设置：选择文本，单击一个按钮，文本被包含在适当的标签中。

为了改善这一点，我现在需要检查选择前后的文本，查看标签是否已经打开等。有没有简单的方法来检查选择是否是更大节点的一部分？

例如，如果我要在以下文本中选择“跳转”并单击，则正确的行为是取消<strong> 它，因为它已经在<strong> 节点中。

The <strong>quick brown fox jumps over the lazy dog</strong>.

【问题讨论】：

鼠标中的select是什么意思？
这可能有助于stackoverflow.com/questions/361130/…
@diEcho ECMAScript 实现到目前为止不支持后向断言，在这里也没有帮助。
@PointedEars 我没写
对于粗体按钮的情况，有没有不能使用document.execCommand("bold", false, null)的原因？

标签： javascript jquery html

【解决方案1】：

将其包装在一个临时标签中，使其成为可选的 DOM 元素

The <strong>quick brown fox <tmp>jumps</tmp> over the lazy dog</strong>.

然后调用临时标签的父级，并将其与正在应用的标签进行比较。

var $tmp = $('tmp');
var enclosingTagType = $tmp.parent()[0].tagName;
if (enclosingTagType == requestedTagType {
  ....profit...
}

甚至

$tmp.closest(requestedTagType)

看看它是否被包裹了......

【讨论】：

【解决方案2】：

为了改善这一点，我现在需要检查选择前后的文本，查看标签是否已经打开等。有没有简单的方法来检查选择是否是更大节点的一部分？

（标签打开 [in HTML, with <]，但你真正的意思是 an element has been started。区别对于你理解你在这里做什么至关重要。）

因为文档中的一个节点是文档树的一部分，而一个文本节点最多可以是一个非文本节点的子节点，每个文本选择是“较大节点的一部分”。但是，您是否可以找出该节点是什么，以及是否容易取决于您的能力和浏览器，因为它取决于布局引擎使用的 DOM 实现。浏览器。

例如，在基于 Gecko 的浏览器（如 Firefox）和基于 WebCore 的浏览器（如 Chrome/Google Chrome）中，您可以执行

var selection = window.getSelection();

在选择时。在selection 中，您将获得对实现Selection (Gecko) 或DOMSelection (WebCore) 接口的对象的引用，该对象具有anchorNode 等属性，这些属性引用实现Text 接口的对象（请参阅Gecko DOM Reference at MDN）。

代表选择开始所在的文本节点的那个对象有一个parentNode属性，它可以让你获得元素节点对象，并通过它的tagName或nodeName属性，元素类型名称：

var textParent = selection.anchorNode.parentNode;
var textParentType = textParent.nodeName;

textParent.parentNode 的值随后可用于向上遍历文档树上一层。

当anchorNode 和focusNode 属性引用不同的文本节点对象时必须格外小心，因为这样选择通常不仅跨越多个文本节点，而且跨越多个元素。也就是说，用户可以在表格中轻松选择文本“foobar”，如<td>foo</td><td>bar</td>。

通过运行时功能测试和异常处理，您可以确定支持哪个接口，而无需求助于容易出错的浏览器嗅探。

例如，如果我要在以下文本中选择“跳转”并单击，则正确的行为是取消strong 它，因为它已经在strong 节点中。

您可能需要重新考虑这一点。也许你只是选择了一个不好的例子，但 strong 元素中的 strong 元素中可能存在价值；内部元素的 CSS 属性不一定是多余的。另一个例子是强调 em 元素中已有的文本，然后用户可能想要使用 strong 元素。

避免使用 jQuery；你不需要它，仔细观察你甚至不会想要它。

【讨论】：

anchorNode 和 focusNode 不保证引用文本节点，并且对于某些浏览器中的某些选择，它们不保证。
@TimDown 请更具体一些，以便我更新我的答案。
好的。在 Firefox 11 中打开以下示例并三次单击文本：jsfiddle.net/timdown/8hs45。这不是一个孤立的例子。据我所知，anchorNode 和 focusNode 实际上仅限于元素或文本节点，尽管如果选择了具有其他节点类型边界的范围，我不排除浏览器在其他节点类型中报告它们.

【解决方案3】：

在这里，试试这个：

http://jsbin.com/asajuk/7/edit

var getSelectedNode = function ()
    {
        var node, selection;
        if (window.getSelection)
        {
            selection = getSelection();
            node = selection.anchorNode;
        }
        if (!node && document.selection)
        {
            selection = document.selection
            var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
            node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement ? range.parentElement() : range.item(0);
        }
        if (node)
        {
            return (node.nodeName == "#text" ? node.parentNode : node);
        }
    };

【讨论】：