Javascript插入元素的字符引用可编辑的DIV与子元素

Question

现在我有一个可编辑的DIV。我已经能够很容易地获得char索引，但是我无法将它插入正确的位置。我可以使用拼接插入它，只要没有HTML元素就可以工作。那么我将如何去忽略标签呢？看起来使用正则表达式可能是可能的，但是处理过多。看起来我可以使用Range，但是我在理解JavaScript范围方面遇到了很多麻烦。以下是基本思想：

<div class="toinsert" contenteditable="true">Some Text <strong>here</strong></div> 

。

var charisat = 8; //SOME NUMBER 

var dividedcontent = []; //DIVIDE CONTENT, BY RANGE OR REGEX 

$('.toinsert').html(dividedcontent[0] + '<em>other text</em>' + dividedcontent[1]); 

Answer 1

不知道是否有更好的办法，但粗暴的方式会像

var charisat = 8; 
 
addContent($('<em>other text</em>'), charisat, $('.toinsert')) 
 

 

 
function addContent($content, pos, $el) { 
 
    $el.contents().each(function() { 
 
    if (this.nodeType == Node.TEXT_NODE) { 
 
     var text = $(this).text(); 
 
     if (text.length >= pos) { 
 
     var $obj = $(); 
 
     $obj = $obj.add(document.createTextNode(text.substring(0, pos))); 
 
     $obj = $obj.add($content); 
 
     $obj = $obj.add(document.createTextNode(text.substring(pos))); 
 
     $(this).replaceWith($obj); 
 
     return; 
 
     } else { 
 
     pos -= text.length; 
 
     } 
 
    } else if (this.nodeType == Node.ELEMENT_NODE) { 
 
     pos = addContent($content, pos, $(this)); 
 
    } 
 
    return pos; 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toinsert" contenteditable="true">Some Text <strong>here</strong> 
 
</div>