Javascript 在鼠标位置插入子标记

我有一个div元素，里面有文本，可能还有其他子标记（imgs、span等）。我需要以下内容-当用户在文本的div中单击某个位置时，必须将子标记准确插入文本中的该位置。绝对定位不是一个选项-我需要修改div的innerHTML

例如，如果div是

<div>some text, more text</div>

一些文本，更多文本

用户点击“更多”之后，我的div应该修改如下

<div>some text, more<span>new tag</span> text</div>

一些文本，更多新标记文本

您可以将每个单词/字符包装在一个范围内，然后在该范围后附加新标记。LetteringJS（）可以帮助您实现这一点

---

如果您使用输入，那么可以使用jCaret（），从示例中可以看出，它看起来非常奇特。

您可以将每个单词/字符包装在一个跨距中，然后在该跨距后附加新标记。LetteringJS（）可以帮助您实现这一点

---

如果您使用输入，您可以使用jCaret（），从示例中判断，它看起来非常奇特。

正如@LePhil所建议的，我将每个单词包装在一个span中。在以下示例中，文本插入到单击鼠标的单词之后：

函数解析HTML（str）{
var结果=“”；
函数processText（text，i）{
如果（文本和文本！=''）{
结果+=''+文本+''；
}
}
函数processTag（标记）{
结果+=标签；
}
var withinTag=false，withinText=false，text=''，tag=''；
对于（变量i=0；i如果（x>=node.offsetLeft&&x=node.offsetTop&&y）如@LePhil所建议，我将每个单词包装在一个跨距中。在下面的示例中，文本插入到单击鼠标的单词之后：


函数解析HTML（str）{
var结果=“”；
函数processText（text，i）{
如果（文本和文本！=''）{
结果+=''+文本+''；
}
}
函数processTag（标记）{
结果+=标签；
}
var withinTag=false，withinText=false，text=''，tag=''；
对于（变量i=0；i=node.offsetLeft&&x=node.offsetTop&&y
function parseHTML(str) {

    var result = '';

    function processText(text, i) {
        if (text && text !== ' ') {
            result += '<span data-begin-index=' + (i - text.length) + ' data-end-index=' + (i - 1) + '>' + text + '</span>';
        }
    }

    function processTag(tag) {
        result += tag;
    }

    var withinTag = false, withinText = false, text = '', tag = '';
    for (var i = 0; i < str.length; i++) {
        var ch = str.charAt(i);
        if (ch === '<') {
            withinText = false;
            withinTag = true;
            processText(text, i);
            text = '';
            tag = '<';
        } else if (ch === '>') {
            withinTag = false;
            withinText = false; 
            processTag(tag + '>');
            tag = '';
            text = '';
        } else if (ch === ' ' || ch == '\xA0') {
            if (withinTag) {
                tag += ch;
            } else {
                if (!text.replace(/\s+/g,'')) {
                    text += ch;
                } else {
                    processText(text + ch, i + 1);
                    text = '';
                }
            }
        } else {
            if (withinTag) {
                tag += ch;
            } else {
                text += ch;
            }
        }
    }
    processText(text, str.length);
    return result;
}

function findNode(node, x, y) {
    if (node.attributes['data-begin-index']) {
        if (x >= node.offsetLeft && x <= node.offsetLeft + node.offsetWidth && 
            y >= node.offsetTop && y <= node.offsetTop + node.offsetHeight)
        {
            return node;
        }
    } else {
        for (var i = 0; i < node.childNodes.length; i++) {
            var result = findNode(node.childNodes[i], x, y);
            if (result) {
                return result;
            }
        }
    }
}

function clicked(e, node) {
    console.log('clicked mouse');
    var x = e.x - 100;
    var y = e.y - 100;
    console.log(x + ', ' + y);
    var node = findNode(node, x, y);
    if (node) {
        var beginIndex = parseInt(node.getAttribute('data-begin-index'));
        var endIndex = parseInt(node.getAttribute('data-end-index'));
        newHTML = html.substring(0, endIndex + 1) + 'XXXXX ' + html.substring(endIndex + 1);
    } else {
        newHTML = html + 'XXXXX ';
    }
    document.getElementById('mydiv').innerHTML = parseHTML(html = newHTML);

}

document.getElementById('mydiv').innerHTML = parseHTML(html);