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

I need to process selected(highlighted with mouse) text in html page. But if I'm selecting ordered list <ol></ol> elements I'm losing numbering information. Maybe someone can help me with this information extraction, because if I select and copy+paste selection to text editor - I see those numbers. Function used for html fragment selection:

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

Complete fiddle example : https://jsfiddle.net/t2mhcbyo/3/

完整的小提琴示例:https://jsfiddle.net/t2mhcbyo/3/

1 个解决方案

#1

Updated fiddle here. The main problem is that you are not, in fact, actually selecting the numbers. They cannot be selected. (You notice they don't get highlighted).

这里更新了小提琴。实际上,主要的问题是你实际上并没有选择这些数字。他们无法选择。 (你注意到他们没有突出显示)。

I suspect that when you are copying the list into a 'text' editor, you are actually copying html (which is an ordered list that has numbers), which the editor displays as an ordered list. When you copy into a plain text editor like notepad, wordpad, or just remove formatting, it will return to just the highlighted test.

我怀疑当你将列表复制到'文本'编辑器时,你实际上是在复制html(这是一个有数字的有序列表),编辑器将其显示为有序列表。当您复制到纯文本编辑器(如记事本,wordpad)或只删除格式时,它将返回到突出显示的测试。

To get the number at the start of the list items, you can store the information directly in the <li> tags.

要获取列表项开头的数字,可以将信息直接存储在

标记中。

<li index="3">

Then, when you select the highlighted html, you can use a regex string replace to change the index to a number.

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

Example regex:

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

<li index="3"> becomes <li>3.

变为

3。

This replaces the start list item tag that contains index information with a tag that has no information, but has a number at the start of the list.

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

Issue: This method puts a number at the start of every line, regardless of how much of the line is actually highlighted. You might be able to modify the regex to only replace some of the index="#"'s.

问题:此方法将数字放在每一行的开头,无论实际突出显示多少行。您可以修改正则表达式,只替换一些index =“#”。

#1