Как получить индекс диапазона, как мне выделить выделенный диапазон и напечатать выбранный текст?

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

может возникнуть проблема перекрестной безопасности.