如何選擇（突出顯示）和復制有序列表編號

Question

我需要在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/

Answer 1

這里更新了小提琴。 實際上，主要的問題是你實際上並沒有選擇這些數字。 他們無法選擇。 （您注意到它們沒有突出顯示）。

我懷疑當你將列表復制到“文本”編輯器時，實際上是在復制html（這是一個有數字的有序列表），編輯器將其顯示為有序列表。 當您復制到純文本編輯器，如記事本，wordpad，或只是刪除格式，它將返回到突出顯示的測試。

要獲取列表項開頭的數字，可以將信息直接存儲在<li>標記中。

<li index="3">

然后，當您選擇突出顯示的html時，可以使用正則表達式字符串替換將索引更改為數字。

示例正則表達式：

   html = html.replace(/<li\ index="([0-9]+)">/g, "<li>$1. ");

<li index="3">變為<li>3.

這將替換包含索引信息的開始列表項標記，其中標記沒有信息，但在列表的開頭有一個數字。

問題：此方法在每行的開頭放置一個數字，無論實際突出顯示多少行。 您可以修改正則表達式以僅替換某些index="#" 。