【发布时间】：2013-10-14 23:34:22
【问题描述】：
我正在使用以下 xpath 和偏移量突出显示选定的文本。
这是我用来调试的文本的 example 选择。
[{
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]",
startOffset: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 fiddle 的链接
http://jsfiddle.net/E2BbX/11/
【问题讨论】：
-
一般来说，使用
for .. in来迭代一个数组是不被接受的。不要这样做，使用适当的for循环或您喜欢的 JS 框架中的专用数组迭代器函数。 -
非常感谢您的提示，我会为该迭代添加适当的 for 循环
-
原因是
for .. in迭代所有对象属性，对于数组，这是数组的所有索引和可能已添加的任何自定义属性。for .. in可能会在运行时工作或中断，具体取决于传递的对象的外观，因此最好谨慎行事。
标签： javascript