Объект Range с JSON

Question

Я пишу расширение для Chrome, и мне нужно передать значение, выбранное пользователем на веб-сайте, на мой сервер.Я использую код window.getSelection (), который возвращает объект диапазона.Я использую JSON для передачи объекта диапазона обратно на сервер, но он не работает.Я новичок в этом, но я думаю, что проблема заключается в том, что вы можете передавать только текст с помощью JSON, а объект диапазона включает в себя как структуру DOM (которая не является текстом), так и фактический выбор текста (который является текстом).,Я прав?Есть ли альтернатива?

var selection = window.getSelection();
$.getJSON(url, {data:selection}, function(moot) {
    alert("done");
});

Answer 1

Простой обходной путь - не сериализовать и отправлять весь объект выбора, а скорее сохранять начальную и конечную точки как XPath (вместе с их смещениями).Примерно так:

function makeXPath (node, currentPath) {
  /* this should suffice in HTML documents for selectable nodes, XML with namespaces needs more code */
  currentPath = currentPath || '';
  switch (node.nodeType) {
    case 3:
    case 4:
      return makeXPath(node.parentNode, 'text()[' + (document.evaluate('preceding-sibling::text()', node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']');
    case 1:
      return makeXPath(node.parentNode, node.nodeName + '[' + (document.evaluate('preceding-sibling::' + node.nodeName, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']' + (currentPath ? '/' + currentPath : ''));
    case 9:
      return '/' + currentPath;
    default:
      return '';
  }
}

function restoreSelection () {
      var selection = window.getSelection();
      selection.removeAllRanges();
      var range = document.createRange();
      range.setStart(document.evaluate(selectionDetails[0], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, Number(selectionDetails[1]));
      range.setEnd(document.evaluate(selectionDetails[2], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, Number(selectionDetails[3]));
      selection.addRange(range);
  }
}

function getSelection() {
   var selection = window.getSelection();
   var range = selection.getRangeAt(0);
   var selectObj = { 
      'startXPath': makeXPath(range.startContainer), 
      'startOffset': range.startOffset, 
      'endXPath': makeXPath(range.endContainer), 
      'endOffset': range.endOffset 
   }

   return selectObj
}

Не проверено полностью, но общая идея здесь.

Источники: Это и Это

Answer 2

Если вам нужно отправить выбор пользователя на вашей странице

var selection = window.getSelection();  

for(i=0;i<selection.rangeCount;i++) 
a[i]=selection.getRangeAt(i);

$.getJSON(url, {data:a.toString()}, function(moot) {
   alert("done");
});

Примечание: вместо toString() вы также можете использовать join('<separator>') в зависимости от ваших потребностей

Использование window.getSelection().toString() объединит все выборки без разделителя

Answer 3

Вы пробовали window.getSelection().toString()?Это должно получить только текстовое значение само по себе.

MDN в настоящее время не работает, но вы можете проверить там документацию DOMSelection: https://developer.mozilla.org/En/DOM/Selection

EDIT

Вы также можете попробовать использовать свойства anchorNode и focusNode, чтобывозьмите узлы, в которых выбор начинается и заканчивается.Если вам действительно нужен необработанный html, вы можете сделать что-то вроде focusNode.parentNode.outerHTML, чтобы получить весь блок (похоже, вы не можете напрямую использовать externalHTML для фокуса или узлов привязки).

, то есть:

var selection = window.getSelection();
var payload = {
    selectedText: selection.toString(),
    startHTML: selection.anchorNode.parentNode.outerHTML,
    endHTML: selection.focusNode.parentNode.outerHTML
}

, а затем проанализируйте его на другой стороне.Вы также можете извлечь другую информацию из узлов, чтобы вам не приходилось передавать целые строки html по проводам.