Получить выделенный текст и выбранные узлы на странице?

Вы можете начать с http://javascript.internet.com/page-details/copy-selected-text.html

Вас ожидает ухабистая поездка, но это вполне возможно. Основная проблема заключается в том, что IE и W3C предоставляют совершенно разные интерфейсы для выбора, поэтому, если вам нужна кросс-браузерная функциональность, вам в основном придется писать все это дважды. Кроме того, в обоих интерфейсах отсутствуют некоторые базовые функции.

Связь разработчиков Mozilla рассказала о Выборы W3C. У Microsoft есть своя система задокументировано в MSDN. Я рекомендую начать с введение в диапазоны PPK.

Вот несколько основных функций, которые, как мне кажется, работают:

// selection objects will differ between browsers
function getSelection () {
  return ( msie ) 
    ? document.selection
    : ( window.getSelection || document.getSelection )();
}

// range objects will differ between browsers
function getRange () {
  return ( msie ) 
      ? getSelection().createRange()
      : getSelection().getRangeAt( 0 )
}

// abstract getting a parent container from a range
function parentContainer ( range ) {
  return ( msie )
      ? range.parentElement()
      : range.commonAncestorContainer;
}

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

function getRange(){
    return (navigator.appName= = "Microsoft Internet Explorer")
        ? document.selection.createRange().parentElement()
        : (getSelection||document.getSelection)().getRangeAt(0).commonAncestorContainer
}

Моя библиотека Стройный поможет вам в этом, объединив различные API-интерфейсы в IE <9 и всех других основных браузерах и предоставив функцию getNodes() для своих объектов Range:

function getSelectedNodes() {
    var selectedNodes = [];
    var sel = rangy.getSelection();
    for (var i = 0; i < sel.rangeCount; ++i) {
        selectedNodes = selectedNodes.concat( sel.getRangeAt(i).getNodes() );
    }
    return selectedNodes;
}

Получить выделенный текст довольно просто во всех браузерах. В Рэнги это просто

var selectedText = rangy.getSelection().toString();

Без Рэнги:

function getSelectedText() {
    var sel, text = "";
    if (window.getSelection) {
        text = "" + window.getSelection();
    } else if ( (sel = document.selection) && sel.type == "Text") {
        text = sel.createRange().text;
    }
    return text;
}

Что касается смещения символов, вы можете сделать что-то подобное для любого узла node в выборе. Обратите внимание, что это не обязательно представляет видимый текст в документе, потому что он не учитывает свернутые пробелы, текст, скрытый с помощью CSS, текст, расположенный за пределами обычного потока документа с помощью CSS, разрывы строк, подразумеваемые <br> и блочными элементами, а также другие тонкости.

var sel = rangy.getSelection();
var selRange = sel.getRangeAt(0);
var rangePrecedingNode = rangy.createRange();
rangePrecedingNode.setStart(selRange.startContainer, selRange.startOffset);
rangePrecedingNode.setEndBefore(node);
var startIndex = rangePrecedingNode.toString().length;
rangePrecedingNode.setEndAfter(node);
var endIndex = rangePrecedingNode.toString().length;
alert(startIndex + ", " + endIndex);

Это возвращает выбранные узлы, как я понимаю: Когда у меня есть

<p> ... </p><p> ... </p><p> ... </p><p> ... </p><p> ... </p>...
<p> ... </p><p> ... </p><p> ... </p><p> ... </p><p> ... </p>

много узлов, и я выбираю только несколько, тогда я хочу, чтобы в списке были только эти узлы.

function getSelectedNodes() {
  // from https://developer.mozilla.org/en-US/docs/Web/API/Selection
  var selection = window.getSelection();
  if (selection.isCollapsed) {
    return [];
  };
  var node1 = selection.anchorNode;
  var node2 = selection.focusNode;
  var selectionAncestor = get_common_ancestor(node1, node2);
  if (selectionAncestor == null) {
    return [];
  }
  return getNodesBetween(selectionAncestor, node1, node2);
}

function get_common_ancestor(a, b)
{
    // from http://stackoverflow.com/questions/3960843/how-to-find-the-nearest-common-ancestors-of-two-or-more-nodes
    $parentsa = $(a).parents();
    $parentsb = $(b).parents();

    var found = null;

    $parentsa.each(function() {
        var thisa = this;

        $parentsb.each(function() {
            if (thisa == this)
            {
                found = this;
                return false;
            }
        });

        if (found) return false;
    });

    return found;
}

function isDescendant(parent, child) {
     // from http://stackoverflow.com/questions/2234979/how-to-check-in-javascript-if-one-element-is-a-child-of-another
     var node = child;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

function getNodesBetween(rootNode, node1, node2) {
  var resultNodes = [];
  var isBetweenNodes = false;
  for (var i = 0; i < rootNode.childNodes.length; i+= 1) {
    if (isDescendant(rootNode.childNodes[i], node1) || isDescendant(rootNode.childNodes[i], node2)) {
      if (resultNodes.length == 0) {
        isBetweenNodes = true;
      } else {
        isBetweenNodes = false;
      }
      resultNodes.push(rootNode.childNodes[i]);
    } else if (resultNodes.length == 0) {
    } else if (isBetweenNodes) {
      resultNodes.push(rootNode.childNodes[i]);
    } else {
      return resultNodes;
    }
  };
 if (resultNodes.length == 0) {
    return [rootNode];
  } else if (isDescendant(resultNodes[resultNodes.length - 1], node1) || isDescendant(resultNodes[resultNodes.length - 1], node2)) {
    return resultNodes;
  } else {
    // same child node for both should never happen
    return [resultNodes[0]];
  }
}

Код должен быть доступен по адресу: https://github.com/niccokunzmann/spiele-mit-kindern/blob/gh-pages/javascripts/feedback.js

Я разместил этот ответ здесь, потому что мне бы хотелось найти его здесь.

Код, соответствующий всем стандартам, работающий в IE11 +.

Текстовая строка

window.getSelection().getRangeAt(0).toString()

начальный узел (даже если текст выделен в обратном направлении):

window.getSelection().anchorNode

конечный узел (даже если текст выделен в обратном направлении):

window.getSelection().focusNode

Хочешь узнать больше? Выделите текст и запустите в консоли следующий код JavaScript:

console.info(window.getSelection());
console.info(window.getSelection().getRangeAt(0));