如何使用javascript在文本之间插入图像节点？

我需要在发生鼠标点击的文本之间插入图像，这样图像就会在文本之间插入自身，而不会与文本重叠，如图所示

---

更改后，如果我在B和N之间单击，基本上应该看起来像mbmnB/img/Nmnbbmn。

将每个字母放入

span

中，以便在单击事件发生时可以检测鼠标在哪个字母上。

您应该将文本分成两个内联部分。所以最好使用span元素，因为它们是内联的，不引入换行符

以后你应该得到插入符号的位置。您可以使用此答案获取它：。假设您的位置在

var pos

然后您可以拆分：

function span(text) {
  return '<span>'+text+'</span>';
}

var content = $('#box').html();
var left  = span(content.substring(0, pos));
var right = span(content.substring(pos, content.length));
var img   = '<img src="your_image.ext"></img>';
$('#box').html(left + img + right);

功能范围（文本）{
返回“”+文本+“”；
}
var content=$（'#box'）.html（）；
var left=span（content.substring（0，pos））；
var right=span（content.substring（pos，content.length））；
var img=“”；
$（'#box'）.html（左+img+右）；

请注意，此代码未经测试，只是显示了机制。
您可以将文本转换为节点（span），然后检测节点上的鼠标单击事件。然后从该节点分割文本，并在其中插入图像：

要在文本节点中转换，请执行以下操作：

function wrapCharacters(element) {
            $(element).contents().each(function() {
                if(this.nodeType === 1) {
                    wrapCharacters(this);
                }
                else if(this.nodeType === 3) {
                    $(this).replaceWith($.map(this.nodeValue.split(''), function(c) {
                       return '<span>' + c + '</span>';
                    }).join(''));
                }
            });
        }    


        wrapCharacters($('#box')[0]);

函数wrapCharacters（元素）{
$（元素）.contents（）.each（函数（））{
if（this.nodeType==1）{
wrapCharacters（此）；
}
else if（this.nodeType==3）{
$（this.replaceWith（$.map）（this.nodeValue.split（“”），函数（c）{
返回“+c+”；
}).加入（“”）；
}
});
}    
wrapCharacters（$（'#box'）[0]）；

检查此小提琴，希望它有帮助：


function wrapCharacters(element) {
            $(element).contents().each(function() {
                if(this.nodeType === 1) {
                    wrapCharacters(this);
                }
                else if(this.nodeType === 3) {
                    $(this).replaceWith($.map(this.nodeValue.split(''), function(c) {
                       return '<span>' + c + '</span>';
                    }).join(''));
                }
            });
        }    


        wrapCharacters($('#box')[0]);