Question

在html页面中，您可能会有一些包含两个段落的代码：

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

非常简单，这两个标签会像这样呈现：

第一段

第二段

我感兴趣的是允许用户单击渲染的html代码中的某个位置，以便使用JQuery插入新元素。例如，如果我在第一段中找到的单词f * ir * st中单击字母i和字母r（只需点击一下，没有高亮/选择），我就可以插入一个自定义的span元素或者我喜欢的任何我想在HTML代码中的那个位置产生这样的东西：

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

任何可以帮助我的想法？我的要求不包括绝对定位。这不会解决我的问题。

Answer 1

这很脏但使用contenteditable：http://jsfiddle.net/Jj9Mp/。

$('div').click(function(e) {
    $('div').attr('contenteditable', true);
    document.execCommand("InsertHTML", false, "<span class=red>!</span>")
    e.stopPropagation();
});

$(':not(div)').click(function(e) {
    if($(this).parents('div').length === 0) {
        $('div').attr('contenteditable', false);
    } else {
        $('div').click();
    }
    e.stopPropagation();
});

Answer 2

以下是我的解决方案：http://jsfiddle.net/gion_13/L6aeT/
它的工作原理是计算字符串的实际大小（以px为单位）。

Answer 3

这可以通过稍微复杂的脚本来完成。

我可以说明你可以尝试的算法。

1.JQuery有一个API偏移量（）http://api.jquery.com/offset/使用你可以得到偏移量和元素。

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

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

根据我点击javascript / JQuery的位置更改HTML

3 个答案: