Javascript html页面中仅包含xPath、AnchoroOffset和focusOffset的高位文本
我试图高亮显示html页面中的某部分文本,该页面只有选定区域的xPath(或css路径)、anchorOffset和focusOffset 我知道如何使用用户输入的selection()方法来管理这一点,但我很难在没有选择的情况下,仅使用这些信息,以自动方式再现相同的机制 示例:(假设我还有许多其他类似的例子) 我的目标是这样的 (见图) 有人能给我一个关于这项任务的提示吗Javascript html页面中仅包含xPath、AnchoroOffset和focusOffset的高位文本,javascript,html,css,xpath,syntax-highlighting,Javascript,Html,Css,Xpath,Syntax Highlighting,我试图高亮显示html页面中的某部分文本,该页面只有选定区域的xPath(或css路径)、anchorOffset和focusOffset 我知道如何使用用户输入的selection()方法来管理这一点,但我很难在没有选择的情况下,仅使用这些信息,以自动方式再现相同的机制 示例:(假设我还有许多其他类似的例子) 我的目标是这样的 (见图) 有人能给我一个关于这项任务的提示吗 非常感谢 我不知道像heyThere[1]这样的相对路径如何选择HTML文档中的任何内容,因为根元素名是HTML,而不是
非常感谢 我不知道像
heyThere[1]
这样的相对路径如何选择HTML文档中的任何内容,因为根元素名是HTML
,而不是heyThere
。至于设置某个部分的样式,假设您有一个指向文本节点的路径,并且偏移量在该文本节点内,您可以使用W3C DOM Level 2 Rang API创建一个范围,创建一个span
,使用某个CSS类作为包装器,这样可以突出显示文本。请注意,旧版IE版本中不支持该DOM API,我认为只有Windows 10上的Edge支持文档。请使用XPath评估,我不确定支持范围
功能突出显示(文本节点、开始、结束){
var range=document.createRange();
range.setStart(textNode,start);
range.setEnd(textNode,end);
var span=textNode.ownerDocument.createElement('span');
span.className='highlight';
范围。周围内容物(跨度);
}
window.onload=函数(){
var testData=[
{
路径:“html/body/section/h1/text()”,
起点:3,
完:5
},
{
路径:“html/body/section/div/ul/li[2]/text()”,
开始时间:12点,
完:19
},
{
路径:'//p',
起点:1,
完:1
}
];
对于(var i=0;i
。突出显示{
颜色:棕色;
字体大小:粗体;
}
例子
- 这是清单项目1
- 这是清单项目2
xPath只是一个例子。。。只要假设它是完整的和正确的!顺便说一句,非常感谢您的帮助和代码,我会研究它,并让您知道我是否成功地将其改编为我的代码。我成功地使用了您的答案代码和本页的部分代码实现了这一点再次感谢
Xpath : heyThere[1]
anchorOffset : 3
focusOffset : 45