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

How to insert image node between text using javascript?

本文关键字：插入 图像 节点 之间 文本 何使用 javascript      更新时间：2023-09-26

我需要在发生鼠标单击的文本之间插入图像，以便图像将自身插入文本之间，并且不会像此jsfilddle中看到的那样与文本重叠。

$('#box').click(function(ev){
    $('img.mover').clone()
    .removeClass('mover')
    .appendTo('body')
    .css('left', ev.pageX-20)
    .css('top', ev.pageY-20);
 });

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

您可以将文本转换为节点（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]);

检查这个小提琴希望它有帮助：

小提琴

将每个字母放入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);

请注意，此代码未经测试，而仅显示机制。

相关文章：