Question

我使用以下xpath和偏移突出显示所选文本。

这是我用来调试的示例选择文本。

[{
  commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
  startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
  startOffset:0,
  endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
  endOffset:1,
  color: "purple"
}]

上面的这个选择可以很好地并突出显示所选的段落。现在这里是我被卡住的部分，只要我在段落中添加文字就无法突出显示文字。

以下是选定段落和文本的示例，因此理论上这应该只选择您选择的段落内的文本。 更改以粗体显示

[{
  commonAncestorContainer：“/ xhtml：html [0001] / xhtml：body [0001] / xhtml：p [0002] / text（）[0] ”，
  startContainer：“/ xhtml：html [0001] / xhtml：body [0001] / xhtml：p [0002] / text（）[0] ”，
  开始偏移：288 中，
  endContainer：“/ xhtml：html [0001] / xhtml：body [0001] / xhtml：p [0002] / text（）[0] ”，
   endOffset：330 中，
  颜色：“紫色”
}]

test.html

（这使用highlight.show）

function highlightTest() {
        $MON.highlight.show([
            {
                commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
                startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
                startOffset:0,
                endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
                endOffset:1,
                color: "yellow"
            },
            {
                commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
                startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
                startOffset:288,
                endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
                endOffset:330,
                color: "purple"
            }
        ]);

<小时/>

highlight.js

（这使用xpath.element）

show: function(selections) 
{
        for (var i in selections) 
        {
            var selection = selections[i];

            var ancestor = $MON.xpath.element(selection["commonAncestorContainer"]);                            
            ancestor.contentEditable = "true";

            var col = selection["color"] ? selection["color"] : "yellow";
            var range = document.createRange();

            var startElement = $MON.xpath.element(selection["startContainer"]);            
            var startOffset = selection["startOffset"];            

            var endElement = $MON.xpath.element(selection["endContainer"]);            
            var endOffset = selection["endOffset"];            

            range.setStart(startElement, startOffset);
            range.setEnd(endElement, endOffset);

            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);

            document.execCommand("HiliteColor", false, col);
            window.getSelection().removeAllRanges();
            ancestor.contentEditable = "false";
       }
 }

xpath.js
（这将返回给定xpath的相应元素，返回highlight.js）

element: function (expr) {
        var resolver = function (prefix) {
            if ("xhtml" == prefix) {
                return "http://www.w3.org/1999/xhtml";
            }
        }

        var result = document.evaluate(expr, document, resolver, 9, null).singleNodeValue;
        return result;
    }

<小时/> HTML 的

<body>
    <p>
      1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>
    <p>
      2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>
    <p>
      3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>
    <p>
      4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>
    <p>
      5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>
    <p>
      6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
    </p>

</body>

<小时/> 登录文本选择，获取选定的xpath

38:Selected text: Lorem
44:Collapsed: false
45:Ancestor container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
46:Start container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
47:Start offset: 7
48:End container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
49:End offset: 12

更新（我的问题是）

我不得不添加

document.designMode =“on”;

在我设置hilite颜色之前这里是js小提琴的链接 http://jsfiddle.net/E2BbX/11/

Answer 1

XPath索引是基于一个的。尝试

startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[1]

等等。

文本使用Xpath突出显示

test.html

highlight.js

1 个答案: