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

Question

I have got my 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> 

And I want to create a button which gives me HTML code from the current line. For example:
When my caret is on the second line I want to get:

amet, <u>consectetur</u>

or on seventh line:

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

I tried to do that using Rangy , but that didn't work. How can I do that using JavaScript and/or JQuery?
Thanks for help.

Answer 1

I will not code you the full finished code but here are good help that will get you the result.

First you need to get a method for figuring out lines. I suggest looking at the answer in this stackoverflow: How to select nth line of text (CSS/JS) From that you can get line number for a specific word.

What word your caret is on you can get from this information: How can I get the word that the caret is upon inside a contenteditable div?

Combining the line number functionality with current caret word you will be able to return a full row where your caret is.

Answer 2

This solution is based on the example proposed by Mozilla in Selection.modify() , but using lineboundary granularity and playing with move and extend alter parameters.

To preserve caret position, the range of the selection is stored/restored.

Play with the width of the content, edit the snippet and check it out.

You got your HTML.

 function getSelectionHtml() { var selection = window.document.selection, range, oldBrowser = true; if (!selection) { selection = window.getSelection(); range = selection.getRangeAt(0); oldBrowser = false; } else range = document.selection.createRange(); selection.modify("move", "backward", "lineboundary"); selection.modify("extend", "forward", "lineboundary"); if (oldBrowser) { var html = document.selection.createRange().htmlText; range.select(); return html; } var html = document.createElement("div"); for (var i = 0, len = selection.rangeCount; i < len; ++i) { html.appendChild(selection.getRangeAt(i).cloneContents()); } selection.removeAllRanges(); selection.addRange(range); return html.innerHTML; } document.getElementById("content").onmouseup = function(e) { var html = getSelectionHtml(); document.getElementById("text").innerHTML = html; document.getElementById("code").textContent = html; }; 

 h4, p { margin: 0; } #code { width: 100%; min-height: 30px; } #content { margin: 15px; padding: 2px; width: 200px; height: 300px; border: 1px solid black; } 

 <textarea id="code"></textarea> <div id="text"></div> <div contenteditable="true" id="content" 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>