Question

我正在尝试高亮显示html页面中文本的某些部分，该页面只包含所选区域的xPath（或css路径），anchorOffset和focusOffset。

我知道如何使用来自用户输入的selection（）方法来管理它，但是我在尝试以自动方式重现相同机制时遇到了严重困难而没有选择但只有这些信息

示例:(想象我有很多其他人喜欢这样）

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

我的目标是这样的

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

任何人都可以给我一个提示吗？

非常感谢！

Answer 1

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

＆＃13;

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);
    }
  }
};

＆＃13;

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

＆＃13;

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

＆＃13;

我查了IE支持，从IE 9开始支持范围API，所以只有基于XPath的访问不起作用，IE使用基于CSS的节点选择的例子是

＆＃13;

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);
    }
  }
};

＆＃13;

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

＆＃13;

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

＆＃13;

html页面中的高位文本仅包含xPath，anchorOffset和focusOffset

1 个答案: