Question

我使用该代码获取跨度的索引，我想突出显示选定的跨度并打印选定的文本。

let
    div = document.querySelector('div'),
    text = div.innerText;
div.addEventListener('mouseup', evt => {
    let
        sel = getSelection(),
        result = {
            start: null,
            end: null
        };
    ['start', 'end'].forEach(which => {
        let
            counter = 1,
            tmpNode = div.querySelector('span'),
            node = which == 'start' ? 'anchor' : 'focus';
        if (!sel) return;
        while (tmpNode !== sel[node + 'Node'].parentElement) {
            result[which] += tmpNode.innerText.length;
            counter++;
            tmpNode = div.querySelector('span:nth-child(' + counter + ')')
        }
        result[which] += sel[node + 'Offset'] + (which == 'start' ? 1 : 0);
    });
    alert('Selection starts at ' + result.start + ' and ends at ' + result.end);
}, false);

div {
  padding: 2rem;
  background: royalblue;
  color: white;
}

<div>
  <span>This </span>
  <span>is </span>
  <span>plain </span>
  <span>text </span>
  <span>and </span>
  <span>this </span>
  <span>is </span>
  <span>more </span>
  <span>plain </span>
  <span>text </span>
  <span>and </span>
  <span>this </span>
  <span>is </span>
  <span>the </span>
  <span>final </span>
  <span>plain </span>
  <span>text</span>
</div>

我正在使用前面的代码突出显示管理面板，以查看和比较文本并突出显示错误的单词。

Answer 1

我的评论中可能的示例，该示例使用iframe从要打印的选择（或字符串）创建独立文档：

let div = document.querySelector("div"),
  text = div.innerText;
div.addEventListener(
  "mouseup",
  evt => {
    let sel = getSelection(),
      result = {
        start: null,
        end: null
      };
    ["start", "end"].forEach(which => {
      let counter = 1,
        tmpNode = div.querySelector("span"),
        node = which == "start" ? "anchor" : "focus";
      if (!sel) return;
      while (tmpNode !== sel[node + "Node"].parentElement) {
        result[which] += tmpNode.innerText.length;
        counter++;
        tmpNode = div.querySelector("span:nth-child(" + counter + ")");
      }
      result[which] += sel[node + "Offset"] + (which == "start" ? 1 : 0);
    });
    //alert('Selection starts at '+result.start+' and ends at '+result.end);
    printMyFrame(sel);
  },
  false
);

function printMyFrame(sel) {
  var printFrame = document.createElement("iframe");
  printFrame.setAttribute("id", "iframe");
  printFrame.style.position = "fixed";
  // printFrame.style.opacity = "0"; // uncomment to hide it
  document.body.appendChild(printFrame);
  var doc = document.getElementById("iframe").contentWindow.document;
  doc.open();
  doc.write(sel);
  doc.close();
  printFrame.onload = printFrame.contentWindow.print();
  printFrame.contentWindow.onafterprint = document.body.removeChild(printFrame);
}

div {
  padding: 2rem;
  background: royalblue;
  color: white;
}

<div>
  <span>This </span>
  <span>is </span>
  <span>plain </span>
  <span>text </span>
  <span>and </span>
  <span>this </span>
  <span>is </span>
  <span>more </span>
  <span>plain </span>
  <span>text </span>
  <span>and </span>
  <span>this </span>
  <span>is </span>
  <span>the </span>
  <span>final </span>
  <span>plain </span>
  <span>text</span>
</div>

在线演示https://codepen.io/gc-nomade/pen/rNVdwrP

跨域安全性可能是个问题。

获得跨度索引后，如何突出显示所选跨度并打印所选文本？

1 个答案: