JavaScript - 获取 contentEditable div 中当前行的 HTML

Question

我有我的 contentEditable div:

div {
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

<div contenteditable="true" spellcheck="false" style="font-family: Arial;">
    <b>Lorem ipsum</b> dolor sit amet, <u>consectetur adipiscing elit. 
    Morbi sagittis</u> <s>mauris porta arcu auctor, vel aliquam ligula ornare.</s> 
    Sed at <span id="someId">semper neque, et dapibus metus. 
    Maecenas dignissim est non nunc feugiat</span> 
    sollicitudin. Morbi consequat euismod consectetur. Mauris orci 
    risus, <b>porta quis erat ac, malesuada</b> fringilla odio.
</div>
    
<button>Get current line HTML</button>

我想创建一个按钮，它会为我提供当前行的 HTML 代码。例如:
当我的插入符在第二行时，我想得到:

amet, <u>consectetur</u>

或者在第七行:

<span id="someId">dapibus metus. Maecenas</span>

我尝试使用 Rangy 来做到这一点，但这没有用。我怎样才能使用 JavaScript 和/或 JQuery 做到这一点？
感谢您的帮助。

Answer 1

我不会为您编写完整的代码，但这里有很好的帮助，可以帮助您获得结果。

首先，您需要获得一种计算线条的方法。我建议查看此计算器中的答案:How to select nth line of text (CSS/JS)从中您可以获得特定单词的行号。

你可以从这个信息中得到你的插入符是什么词:How can I get the word that the caret is upon inside a contenteditable div?

将行号功能与当前插入符号相结合，您将能够返回插入符号所在的整行。