Как получить выделенный на странице текст и alt рисунков?

Question

[Евгений Обыкновенный]

Метод document.getSelection().toString() возвращает выделенный на странице текст, но без alt-ов. Как можно сделать, чтобы с текстом захватывались alt-ы рисунков в тексте, как они захватываются при ручном копировании Ctrl+C?

Comments

[Вадим]

Заинтересовал Ваш вопрос, но всё откладывал как время появится и вот оно свершилось.

Изучите объект, который возвращает метод document.getSelection().
Там есть anchorNode и focusNode (нода с которой началось выделение и на которой закончилось), а так же свойства, указывающие на смещение выделения по тексту относительно этих узлов.

Таким образом, в простом случае, когда все выделенные ноды лежат на одном уровне, нужно просто обойти в цикле все узлы от стартового до конечного, проверить если текущая нода(элемент) - картинка, то взять текст из alt атрибута, в противном случае - обратиться к свойству textContent или innerText(какой Вам больше подходит) текущего перебираемого элемента.

Сделал небольшое исследование в хроме перед тем как написать. Пока обнаружил только одну существенную проблему. Если выделение началось или закончилось картинкой, то определить что это картинка по средствам document.getSelection() не представляется возможным. Показывает что выделение началось\закончилось на контейнере, в котором эта img лежит, вместо самой img. Возможно баг хрома. Надо глубже изучить вопрос.

Теория по работе с выделениями https://learn.javascript.ru/range-textrange-selection
Так же пригодится навык навигации по DOM: https://learn.javascript.ru/dom-navigation