如何选择（高亮）并复制有序列表编号

Question

我需要处理网页中选定（用鼠标高亮）的文本。但是，如果我选择有序列表 <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/

- Ignas

Answer 1

这里有更新的jsfiddle 链接。

主要问题是实际上您没有选择数字。它们无法被选择。(您会注意到它们不会被突出显示)。

我怀疑当您将列表复制到“文本”编辑器中时，实际上正在复制HTML(一个带有数字的有序列表)，而编辑器将其显示为有序列表。当您复制到纯文本编辑器(如记事本、写字板或只是删除格式)时，它会返回突出显示的文本。

为了获取列表项开头的数字，您可以直接在<li>标签中存储信息。

<li index="3">

然后，当您选择高亮显示的HTML时，您可以使用正则表达式字符串替换将索引更改为数字。

示例正则表达式：

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

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

这个方法将带有索引信息的开始列表项标签替换为一个没有信息但在列表开头有数字的标签。

问题：该方法会让每一行都以数字开头，无论实际高亮显示的内容有多少。您可以尝试修改正则表达式以仅替换某些index="#"。

- Thomas F

---

谢谢@Thomas F！实际上我有更多的自由，在用户交互之前预处理了所有的HTML。所以我也将所有的<li>替换为<li> 1. ....，然后将所有的<ol>替换为<ul>。但是你的解决方案更加优雅和灵活。谢谢。 - Ignas