html 页面中只有 xPath、anchorOffset 和 focusOffset 的突出显示文本

Question

我试图在 html 页面中突出显示文本的某些部分，该页面只有所选区域的 xPath（或 css 路径）、anchorOffset 和 focusOffset。

我知道如何使用来自用户输入的 selection() 方法来管理它，但我在尝试以自动方式重现相同机制时遇到严重困难，而无需选择但仅使用这些信息

示例：（想象一下我还有很多这样的人）

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

我的目标是这样的

（见图） http://oi57.tinypic.com/68aebo.jpg

任何人都可以给我这个任务的提示吗？

非常感谢！

Answer 1

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

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 的节点的示例 select离子是

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 的突出显示文本

Highliting text in html page having only xPath, anchorOffset and focusOffset

javascript

html

css

xpath

syntax-highlighting