从contenteditable中的插入符位置返回最接近的跨度

Question

If caret placed on word gallery ( or on other word between those two span tags ) how can I get data-id from span element with jQuery?

<div class="editor" contenteditable="true">
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a <span data-id="1"></span>galley
of type and scrambled it to make a type specimen book.</p>
<p> It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.<span data-id-end="1"></span> It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>

Answer 1

You can get attribute data-id using this code in jQuery

 console.log($("span").attr("data-id")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span data-id="3"></span> 

Answer 2

You can get idea from it

 var texta=$("span").nextUntil("span").text().trim(); var starting_sign = texta.indexOf("+"); var ending_sign = texta.indexOf("."); console.log(texta.substring(starting_sign, ending_sign)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span></span> This is text + pick it . for example <span></span>