HTML页面中的高亮文本仅具有xPath，anchorOffset和focusOffset [英] Highliting text in html page having only xPath, anchorOffset and focusOffset

问题描述

我正在尝试突出显示html页面中文本的某些部分，该页面只有所选区域的xPath(或css路径)，anchorOffset和focusOffset.

I'm trying to hightlight some part of a text in a html page having only the xPath (or css path) of the selected area, an anchorOffset and a focusOffset.

我知道如何从用户输入中使用selection()方法来管理此问题，但是在尝试不选择而仅通过这些信息以自动方式重现相同机制的过程中，我遇到了严重的困难

I know how to manage this using the selection() method from user input, but i'm having serious difficulties trying to reproduce the same mechanism in an automathic way without the selection but only with these infos

示例:(想象我还有很多其他这样的人)

Example: (imagine I have many others like this)

Xpath : heyThere[1]
anchorOffset  : 3
focusOffset : 45

我的目标就是这样

(请参见图片) http://oi57.tinypic.com/68aebo.jpg

有人可以给我提示此任务吗?

can anybody give me an hint for this task?

非常感谢！

推荐答案

我看不到像 heyThere [1] 这样的相对路径如何选择HTML文档中的任何内容作为根元素名称是 html 而不是 heyThere .至于样式的某个部分，假设您有通向文本节点的路径且偏移量在该文本节点内，则可以使用W3C DOM Level 2 Rang API创建范围，并创建一个 span 使用某个CSS类作为包装器，这样可以突出显示文本.请注意，在较早的IE版本中不提供对该DOM API的支持，我认为只有Windows 10上的Edge才支持XPath的 document.evaluate ，并且我不确定范围的支持.

I don't see how a relative path like heyThere[1] would select anything in an HTML document as the root element name is html and not heyThere. As for styling a certain part, assuming you have a path leading to a text node and the offsets are inside that text node, you can create a range using the W3C DOM Level 2 Rang API, create a span with a certain CSS class as a wrapper and that way the text can be highlighted. Note that support for that DOM API is not available in older IE versions, I think only Edge on Windows 10 supports document.evaluate with XPath and I am not sure about the range support.

function highlight(textNode, start, end) {
  var range = document.createRange();
  range.setStart(textNode, start);
  range.setEnd(textNode, end);
  var span = textNode.ownerDocument.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
}

window.onload = function() {
  var testData = [
    {
      path: 'html/body/section/h1/text()',
      start: 3,
      end: 5
    },
    {
      path: 'html/body/section/div/ul/li[2]/text()',
      start: 12,
      end: 19
    },
    {
      path: '//p',
      start: 1,
      end: 1
    }
  ];
  for (var i = 0; i < testData.length; i++) {
    var node = document.evaluate(testData[i].path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (node !== null) {
      highlight(node, testData[i].start, testData[i].end);
    }
    else {
      console.log('No node found for path ' + testData[i].path);
    }
  }
};

.highlight {
  color: brown;
  font-weight: bold;
}

<section>
  <h1>Example</h1>
  <div>
    <ul>
      <li>This is list item 1.</li>
      <li>This is list item 2.</li>
    </ul>
  </div>
</section>
  

我查找了IE支持，因为IE 9支持范围API，所以仅基于XPath的访问不起作用，IE使用基于CSS的节点选择的示例是

I looked up the IE support, the range API is supported since IE 9 so only the XPath based access does not work, an example for IE using CSS based node selection is

function highlight(textNode, start, end) {
  var range = document.createRange();
  range.setStart(textNode, start);
  range.setEnd(textNode, end);
  var span = textNode.ownerDocument.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
}

window.onload = function() {
  var testData = [
    {
      css: 'section > h1',
      start: 3,
      end: 5
    },
    {
      css: 'section > div > ul li:nth-child(2)',
      start: 12,
      end: 19
    },
  ];
  for (var i = 0; i < testData.length; i++) {
    var node = document.body.querySelector(testData[i].css);
    if (node !== null) {
      highlight(node.firstChild, testData[i].start, testData[i].end);
    }
    else {
      console.log('No node found for CSS selector ' + testData[i].css);
    }
  }
};

.highlight {
  color: brown;
  font-weight: bold;
}

<section>
  <h1>Example</h1>
  <div>
    <ul>
      <li>This is list item 1.</li>
      <li>This is list item 2.</li>
    </ul>
  </div>
</section>

这篇关于HTML页面中的高亮文本仅具有xPath，anchorOffset和focusOffset的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！