Question

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

例如，如果div是

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

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

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

Answer 1

您可以在一个范围中包装每个单词/字符，然后在该标记之后附加新标记。 LetteringJS（http://letteringjs.com/）可以帮助你。

如果你使用输入，你可以使用看起来很花哨的jCaret（http://www.examplet.org/jquery/caret.php），从例子来看。

Answer 2

正如@LePhil建议的那样，我将每个单词包裹在一个范围内。在以下示例中，将在单击鼠标的单词后插入文本：

http://jsfiddle.net/LXZKA/2/

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

在鼠标位置插入子标记

2 个答案: