从 contenteditable 中的插入符号位置返回最近的跨度答案

【问题标题】：Return closest span from caret position in contenteditable从 contenteditable 中的插入符号位置返回最近的跨度
【发布时间】：2018-02-26 12:31:03
【问题描述】：

如果插入符号放在词 gallery 上（或在这两个跨度标签之间的另一个词上），我如何使用 jQuery 从跨度元素中获取数据 ID？

<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>

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案1】：

您可以在 jQuery 中使用此代码获取属性 data-id

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>

【讨论】：

这不是问题。问题是，如果插入符号放在跨标签之间，但不在跨标签内，我如何获得跨数据 ID。

【解决方案2】：

你可以从中得到灵感

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>

【讨论】：