jquery - 单击时使用 jQuery 拆分或连接文本

Question

我想通过单击鼠标来拆分或合并文本。作为我正在做的项目的一部分。

当用户单击一个字符时，根据当前状态，在当前字符之后标记或取消标记单词边界。

目前，我的文本中的每个单词都包含在一个范围中:

<span class="word">te</span> <span class="word">xt</span>

我希望单击e 会导致:

<span class="word">text</span>

并点击原文中的t 应该会产生:

<span class="word">t</span> <span class="word">e</span> <span class="word">xt</span>

我认为这可以使用 jQuery replaceWith() 函数来完成，但不太确定如何检测单个字符(理想情况下，我想避免每个字符上有额外的跨度) ，因为我的文本可能相对较长)？对于我的实现需求和/或如何执行此操作的建议提供任何帮助，我将不胜感激。

Answer 1

我不知道这是否正是您想要的，但也许会有所帮助:

我使用了文本区域和 jCaret插件检测光标位置，然后在单击时插入或删除空格:

JS:

$('textarea').bind('click', function() {
    var v = $(this).val();
    if (v) {
        var p = $(this).caret().start;
        var ls = $(this).val().split('');
        if (ls[p] == ' ') {
            ls.splice(p, 1);
        } else {
            ls.splice(p, 0, ' ');
        }
        $(this).val(ls.join(''));
    }
});​

演示:

http://jsfiddle.net/JrHQB/

<小时/>

没有文本框:

JS:

$('#t').html('<span>' + $('#t').text().split('').join('</span><span>') + '</span>').find('span').click(function() {
    if ($(this).next().text() == ' ') {
        $(this).next().remove();
    } else {
        $(this).after('<span> </span>');
    }
});​

演示:

http://jsfiddle.net/v4dxf/