如何 select（突出显示）和复制有序列表编号

Question

我需要处理 html 页面中的 selected（用鼠标突出显示）文本。但是，如果我 selecting 有序列表

元素，我将丢失编号信息。也许有人可以帮助我提取信息，因为如果我 select 并将 selection 复制并粘贴到文本编辑器 - 我会看到这些数字。用于 html 片段 selection 的函数：

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;
}

完成 fiddle 示例：https://jsfiddle.net/t2mhcbyo/3/

Answer 1

已更新 fiddle here。主要问题是你实际上并没有 select 计算这些数字。它们不能被 selected。（您注意到它们没有突出显示）。

我怀疑当您将列表复制到 'text' 编辑器时，您实际上是在复制 html（这是一个包含数字的有序列表），编辑器将其显示为有序列表。当您复制到记事本、写字板等纯文本编辑器或只是删除格式时，它会 return 只显示突出显示的测试。

要获取列表项开头的编号，您可以将信息直接存储在 <li> 标签中。

<li index="3">

然后，当您 select 突出显示 html 时，您可以使用正则表达式字符串替换将索引更改为数字。

正则表达式示例：

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

<li index="3"> 变为 <li>3.

这会将包含索引信息的起始列表项标记替换为没有信息但在列表开头有一个数字的标记。

问题：此方法在每行的开头放置一个数字，而不管实际突出显示的行有多少。您可以修改正则表达式以仅替换某些 index="#"。

如何 select（突出显示）和复制有序列表编号

How to select(highlight) and copy ordered list numbers

html

javascript

jquery

highlight

html-lists