Question

我正在使用JQuery编写文档编辑器，并实现了基本格式：选择文本，单击按钮，文本将包含在相应的标记中。

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

例如，如果我要选择＆＃34;跳跃＆＃34;在下面的文本中单击，正确的行为将是de <strong>，因为它已经在<strong>节点中。

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

Answer 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)

看看它是否完全包裹......

Answer 2

在这里，试试这个：

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);
        }
    };

Answer 3

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

（标签打开[以HTML格式显示，<]，但您的真正含义是an element has been started。区别对于您了解自己在这里所做的事情至关重要。）

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

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

var selection = window.getSelection();

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

该对象表示选择开始所属的文本节点，具有tagName属性，可以通过其nodeName或{{1}获取元素节点对象} property，元素类型名称：

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

然后可以使用textParent.parentNode的值来遍历文档树中的另一个级别。

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

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

例如，如果我在下面的文本中选择“跳转”并单击，则正确的行为将是de strong，因为它已经在strong节点中。 / p>

你可能想重新考虑一下。也许你刚刚选择了一个不好的例子，但strong元素中的strong元素可能有价值;内部元素的CSS属性不一定是多余的。另一个例子是强调em元素中已有的文本，然后用户可能希望使用strong元素。

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

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

3 个答案: