根据使用javascript/JQuery单击的位置更改HTML

在html页面中，可能会有一些代码包含以下两段：

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

第一段

第二段

非常简单，这两个标记的呈现方式如下：

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

---

第一段

第二段

---

我感兴趣的是允许用户单击呈现的html代码中的某个地方，以便使用JQuery插入新元素。例如，如果我在第一段中找到的单词f*ir*st中的字母I和字母r之间单击（只需单击，无需选择），我将能够在HTML代码中的该位置插入一个自定义span元素或任何我喜欢的元素，结果如下：

<hr />
<p>The first paragraph</p>
<p>The second paragraph</p>
<hr />

<hr />
<p>The fi<span id="myCustomSpan"></span>rst paragraph</p>
<p>The second paragraph</p>
<hr />

第一段

第二段

---

有什么能帮我的吗？我的要求不包括绝对定位。这并不能解决我的问题。

这可以通过一些复杂的脚本来完成

我可以陈述一个你可以尝试的算法

1.JQuery有一个API offset（），使用它可以获得offset和元素

2.现在您需要获取元素的innerHTML，将其作为字符串，从偏移量Y val，在字符串中的位置Y拆分。将元素设为两个元素

---

3.现在您可以使用creteElement（标记名）在脚本中直接创建一个元素，并设置innerHTML，然后将其插入两个元素之间

这是脏的，但使用了

contenteditable

：

$（'div'）。单击（函数（e）{
$（'div'）.attr（'contenteditable'，true）；
document.execCommand（“InsertHTML”，false，！”）
e、 停止传播（）；
});
$（'：非（div））。单击（函数（e）{
if（$（this）.parents（'div'）.length==0）{
$（'div'）.attr（'contenteditable'，false）；
}否则{
$（'div'）。单击（）；
}
e、 停止传播（）；
});

这是我的解决方案：

---

它通过计算字符串的实际大小（px）来工作

单击i和r是什么意思，是指在中间单击还是突出显示？如果HTML为每个字母包含单独的跨距，这有关系吗？这会让事情变得更容易。我是说在I和r之间点击。没有选择，只需点击一下。每个字母都有一个单独的跨距是不可行的。

.offset（）

方法返回以像素为单位的坐标，而不是以字符为单位的偏移。+1很好！但是，不幸的是，它有点车。您通常可以删除大部分文本，甚至替换字母：（@gion_13:它不适用于选择；在这种情况下，它将覆盖文本。但正如我所说，这也不是一个很好的解决方案。问题是我想延迟插入。例如，我现在先在I和r之间单击，然后在其中插入一个span…@prince:那么你想保存光标位置并使用该位置lat吗er？@pimvdb：完全正确-不是立即。基本上，用户稍后会突出显示一些文本，我将使用突出显示的文本在记录的位置创建一个内部链接，将我带到突出显示的文本。您提供的解决方案非常好！但是，它目前仅使用x位置工作，如果段落行延伸到上方r两行，然后在第二行单击，span标记的插入将发生在第一行而不是第二行。我知道这些缺陷，但该解决方案适合您当前的html上下文。