javascript - 获取所选文本的 xpath

Question

我正在创建一个 epub 图书阅读器。显示这本书后，我希望允许用户向书中添加一些注释。

为了显示这本书，我使用了加载本地 html 文件的 wpf webbrowser 控件

我想通过创建上下文菜单或显示弹出窗口来操作此控件上的选定文本

我需要使用 javascript 函数获取所选文本的 xpath

var uiWebview_xpath = "";

function uiWebview_storeSelection() 
{
    if (typeof window.getSelection != 'undefined')
     {
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);//two range, absolute and relative
        if (range != null) 
        {
            uiWebview_xpath = makeXPath(range.startContainer) + '|' + range.startOffset + '|' + makeXPath(range.endContainer) + '|' + range.endOffset;
            // var x = document.getElementsByName("Hidden1");
            // x.value = uiWebview_xpath;
            return uiWebview_xpath;

        }

}

else if (typeof document.selection != "undefined") {

    if (document.selection.type == "Text") {

        html = document.selection.createRange().htmlText;

    }

    return  html;
}
}

但是我发现我没有使用这个函数的第一部分，我得到的只是第二部分返回的html，我想为此html创建xPath

//http://home.arcor.de/martin.honnen/javascript/storingSelection1.html

function nsResolver(prefix){
    var ns = {
        'mathml' : 'http://www.w3.org/1998/Math/MathML', // for example's sake only
        'h' : 'http://www.w3.org/1999/xhtml'
    };
    return ns[prefix];
}

function makeXPath (node, currentPath) {
    /* this should suffice in HTML documents for selectable nodes, XML with namespaces needs more code */
    currentPath = currentPath || '';
    switch (node.nodeType) {
        case 3:
        case 4:
            return makeXPath(node.parentNode, 'text()[' + (document.evaluate('preceding-sibling::text()', node, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']');
        case 1:
            return makeXPath(node.parentNode, node.tagName + '[' + (document.evaluate('preceding-sibling::' + 'h:' + node.tagName, node, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']' + (currentPath ? '/' + currentPath : ''));
        case 9:
            return '/' + currentPath;
        default:
            return '';
    }
}  

我是编程初学者，我正在寻找指示和帮助，我也想知道网络浏览器控件的版本是否会影响我得到的结果"document.selection != "undefined"和 "window.getSelection != 'undefined'"之间有什么区别

Answer 1

我曾经遇到过这个问题。您所要做的就是添加 IE 浏览器无法识别的功能。

1. 首先您必须使用ierange这将为您提供对象范围而不是 TextRange

2. 使用wgxpath为您提供一个重要的功能，即 document.evaluate

这是我的代码:

    function fixIERangeObject(range, win) { //Only for IE8 and below.
        win = win || window;

        if (!range) return null;
        if (!range.startContainer && win.document.selection) { //IE8 and below

            var _findTextNode = function (parentElement, text) {
                //Iterate through all the child text nodes and check for matches
                //As we go through each text node keep removing the text value (substring) from the beginning of the text variable.
                var container = null, offset = -1;
                for (var node = parentElement.firstChild; node; node = node.nextSibling) {
                    if (node.nodeType == 3) {//Text node
                        var find = node.nodeValue;
                        var pos = text.indexOf(find);
                        if (pos == 0 && text != find) { //text==find is a special case
                            text = text.substring(find.length);
                        } else {
                            container = node;
                            offset = text.length - 1; //Offset to the last character of text. text[text.length-1] will give the last character.
                            break;
                        }
                    }
                }
                //Debug Message
                //alert(container.nodeValue);
                return { node: container, offset: offset }; //nodeInfo
            }

            var rangeCopy1 = range.duplicate(), rangeCopy2 = range.duplicate(); //Create a copy
            var rangeObj1 = range.duplicate(), rangeObj2 = range.duplicate(); //More copies :P

            rangeCopy1.collapse(true); //Go to beginning of the selection
            rangeCopy1.moveEnd('character', 1); //Select only the first character
            rangeCopy2.collapse(false); //Go to the end of the selection
            rangeCopy2.moveStart('character', -1); //Select only the last character

            //Debug Message
            // alert(rangeCopy1.text); //Should be the first character of the selection
            var parentElement1 = rangeCopy1.parentElement(), parentElement2 = rangeCopy2.parentElement();


            rangeObj1.moveToElementText(parentElement1); //Select all text of parentElement
            rangeObj1.setEndPoint('EndToEnd', rangeCopy1); //Set end point to the first character of the 'real' selection
            rangeObj2.moveToElementText(parentElement2);
            rangeObj2.setEndPoint('EndToEnd', rangeCopy2); //Set end point to the last character of the 'real' selection

            var text1 = rangeObj1.text; //Now we get all text from parentElement's first character upto the real selection's first character    
            var text2 = rangeObj2.text; //Here we get all text from parentElement's first character upto the real selection's last character

            var nodeInfo1 = _findTextNode(parentElement1, text1);
            var nodeInfo2 = _findTextNode(parentElement2, text2);

            //Finally we are here
            range.startContainer = nodeInfo1.node;
            range.startOffset = nodeInfo1.offset;
            range.endContainer = nodeInfo2.node;
            range.endOffset = nodeInfo2.offset + 1; //End offset comes 1 position after the last character of selection.
        }
        return range;
    }

    function getRangeObject(win) { //Gets the first range object
        win = win || window;
        if (win.getSelection) { // Firefox/Chrome/Safari/Opera/IE9
            try {
                return win.getSelection().getRangeAt(0); //W3C DOM Range Object
            } catch (e) { /*If no text is selected an exception might be thrown*/ }
        }
        else if (win.document.selection) { // IE8
            var range = win.document.selection.createRange(); //Microsoft TextRange Object
            return fixIERangeObject(range, win);
        }
        return null;
    }

        function nsResolver(prefix) {
            var ns = {
                'mathml': 'http://www.w3.org/1998/Math/MathML', // for example's sake only
                'h': 'http://www.w3.org/1999/xhtml'
            };
            return ns[prefix];
        }

        function makeXPath(node, currentPath) {
            /* this should suffice in HTML documents for selectable nodes, XML with namespaces needs more code */
            currentPath = currentPath || '';
            switch (node.nodeType) {
                case 3:
                case 4:
                    return makeXPath(node.parentNode, 'text()[' + (document.evaluate('preceding-sibling::text()', node, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']');
                case 1:
                    return makeXPath(node.parentNode, node.tagName + '[' + (document.evaluate('preceding-sibling::' + 'h:' + node.tagName, node, nsResolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']' + (currentPath ? '/' + currentPath : ''));
                case 9:
                    return '/' + currentPath;
                default:
                    return '';
            }
        }

         var uiWebview_xpath = "";

    function uiWebview_storeSelection() {

    if (typeof window.getSelection != 'undefined') {
    wgxpath.install(window);
    var selection = window.getSelection();
    var range = selection.getRangeAt(0); //two range, absolute and relative
    if (range != null) {
    uiWebview_xpath = makeXPath(range.startContainer) + '|' + range.startOffset + '|' + makeXPath(range.endContainer) + '|' + range.endOffset;
    alert(uiWebview_xpath);
    return uiWebview_xpath;

    }

    }

    else if (typeof document.selection != "undefined") {
        wgxpath.install();
        var range = getRangeObject();
        if (range != null) {
            uiWebview_xpath = makeXPath(range.startContainer) + '|' + range.startOffset + '|' + makeXPath(range.endContainer) + '|' + range.endOffset;
            alert("D"+uiWebview_xpath);
            return uiWebview_xpath;

        }


//        if (document.selection.type == "Text") {

//            html = document.selection.createRange().htmlText;

//            alert(html);



//        }

        return "elsif\n:" + "html\n:" + html;
    }
    }