Question

我的例子：

<div contenteditable="true">
    Hello <span class="tagname">Hermione</span> hello @
</div>

当我得到div的文本时：

let text = $('[contenteditable=true]').text(); // 'Hello Hermione hello @'

@字符的索引是：21。

我想通过索引在div中插入更多span标签。但是如何在不丢失标签的情况下做到这一点呢？

我的想法：

let $div = $('[contenteditable=true]'), text = $div.text(), 
    tagname = $('<span>').addClass('tagname').text('voldemort');

$div.html(text.substring(0, index))
    .append(tagname)
    .append(text.substring(index + 1, text.length));

如果我使用这种方式，所有已经标记的内容都将被覆盖。我会失去他们。

另外，我不能使用：

$div.html($div.html().replace('@', tagname[0].innerHTML));

因为内容可能包含一些我不想替换的@个字符（必须通过索引）。

对这个问题有任何想法吗？

Answer 1

您必须找到一种机制来始终获取@索引，以确保它是您真正想要的字符索引。

然后您可以按如下方式使用slice：

var html = $('[contenteditable=true]').html(); 

// get the index of the character you need to replace
var idx = html.indexOf("@");

// create the tagname
var tagname = $('<span>').addClass('tagname').text('voldemort');

// slice the existing html content, skip the @, 
// and include the outerhtml of the tagname
var txt2 = html.slice(0, idx) + tagname[0].outerHTML + html.slice(idx + 1);

// set the html of the content editable with the replaced character
$('[contenteditable=true]').html(txt2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">
    Hello <span class="tagname">Hermione</span> hello @
</div>

修改

如果您实际上可以在字符串中确定要替换的@字符的出现次数，请在下面的答案中使用此方法：

https://stackoverflow.com/a/14480366/2611451：

function getPosition(string, subString, index) { return string.split(subString, index).join(subString).length; }

通过索引插入子字符串

1 个答案: