Вставка подстроки с помощью индекса

Question

Мой пример:

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

Когда я получаю текст DIV:

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

Индекс @ характера: 21.

Я хочу вставить больше тега span внутри div через индекс. Но как я могу это сделать, не теряя уже тегов?

Моя идея:

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

Если я использую этот путь, уже все метки (s) будет отменено. Я потеряю их.

Кроме того, я не могу использовать:

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

EDIT

Если вы можете сказать, что это явление номер @ символ, который вы хотите заменить в строке вы используете этот метод в нижеследующем ответе:

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

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