Как выбрать (выделить) и скопировать упорядоченные номера списка

#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> . Но ваше решение более элегантное и гибкое. Спасибо