#javascript #jquery #html #html-lists #highlight
#javascript #jquery #HTML #html-списки #выделить
Вопрос:
Мне нужно обработать выделенный (выделенный мышью) текст на HTML-странице. Но если я выбираю элементы упорядоченного списка <ol></ol>, я теряю информацию о нумерации. Может быть, кто-нибудь может помочь мне с извлечением этой информации, потому что, если я выбираю и копирую вставляю выделение в текстовый редактор — я вижу эти цифры. Функция, используемая для выделения фрагмента html:
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
}
else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
Полный пример скрипки: https://jsfiddle.net/t2mhcbyo/3 /
Ответ №1:
Обновленная скрипка здесь. Основная проблема заключается в том, что вы, по сути, фактически не выбираете числа. Они не могут быть выбраны. (Вы заметили, что они не выделяются).
Я подозреваю, что когда вы копируете список в текстовый редактор, вы фактически копируете html (который представляет собой упорядоченный список с номерами), который редактор отображает как упорядоченный список. Когда вы копируете в обычный текстовый редактор, такой как блокнот, wordpad, или просто удаляете форматирование, он вернется только к выделенному тесту.
Чтобы получить номер в начале элементов списка, вы можете сохранить информацию непосредственно в <li>
тегах.
<li index="3">
Затем, когда вы выбираете выделенный html-код, вы можете использовать замену строки регулярного выражения, чтобы изменить индекс на число.
Пример регулярного выражения:
html = html.replace(/<li index="([0-9] )">/g, "<li>$1. ");
<li index="3">
становится <li>3.
Это заменяет начальный тег элемента списка, который содержит индексную информацию, тегом, который не содержит информации, но имеет номер в начале списка.
Проблема: этот метод помещает число в начало каждой строки, независимо от того, какая часть строки фактически выделена. Возможно, вы сможете изменить регулярное выражение, чтобы заменить только некоторые из index="#"
них.
Комментарии:
1. Спасибо @Thomas F! На самом деле у меня было больше свободы и я предварительно обработал весь html перед взаимодействием с пользователем. Поэтому я также заменил все
<li>
на<li> 1. ....
, а затем все<ol>
на<ul>
. Но ваше решение более элегантное и гибкое. Спасибо