Question

例如，如果我有HTML：

<div id="foo">
<p>Some text in a paragraph</p>
<p>More text in a paragraph</p>
</div>

有人从＆＃34;开始选择＆＃34;＆＃34; （第1段）到＃34;更多＆＃34; （第2段），我想获得如下选择信息：

{
    "object": [div #foo],  /* commonAncestorContainer DOM element of the selection */
    "source": "<div id="foo">\n<p>Some text in a paragraph</p>\n<p>More text in a paragraph</p>\n</div>",  /* outerHTML of the commonAncestorContainer */
    "startOffset": 28,  /* offset of selection starting point in the source code */
    "endOffset": 54  /* offset of selection ending point in the source code */
}

尝试执行此操作时出现以下问题：

我们可以使用Range.commonAncestorContainer来获取范围的commonAncestorContainer。但是，如果选择包含多个范围，我们如何获得真正的commonAncestorContainer？
如何获取源代码片段中选择范围的startOffset和endOffset？

Answer 1

您可能想要查看堆栈溢出中finding common ancestors上的相关问题。当选择包含多个范围时，您可以使用共同的祖先算法来获取所有range.commonAncestorContainer的共同祖先。

以下是获取源内开始和结束偏移量的demo代码。您可能希望根据需要对其进行测试和扩展。

function getPosition(node, child, childOffset) {
    if (!node.contains(child)) {
        return -1;
    }
    var children = node.childNodes;
    var pos = 0;
    for (var i = 0; i< children.length; i++) {
        if (children[i] === child) {
            pos += childOffset;
            break;
        } else if (children[i].contains(child)) {
            pos += getPosition(children[i], child, childOffset);
            break;
        } else if (children[i].nodeName === "#text") {
            pos += children[i].textContent.length;
        } else {
            pos += children[i].outerHTML.length;
        }
    }
    if (node.nodeName !== "#text") {
        pos += node.outerHTML.lastIndexOf(node.innerHTML);
    }
    return pos;
}

Answer 2

尝试此函数返回您需要的信息对象

function getInfo(selector)
{
    var element = $(selector);
    var html = element.clone().wrap('<p>').parent().html();
    var Result = new Object();
    Result.object = "[" + element.prop("tagName") + " " + selector + "]";
    Result.source = html;
    Result.startOffset = $("body").html().indexOf(html);
    Result.endOffset = Result.startOffset + html.length;
    return Result;
}

参数是选择器，所以你需要像这样调用函数：

var info = getInfo("#foo");

从选择范围获取源代码片段？

2 个答案: