单击时使用 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/

Answer 2

您无法检测和处理对单个字符的点击，除非该字符具有自己的 DOM 元素[1]，因此您将需要额外的跨度。唯一的例外是在文本字段或文本区域中，其中单击在触发 OnClick 处理程序之前移动光标。在那里，当前光标位置将包含您需要的信息，并且可以在 OnClick 处理程序中使用。

[1] 这并不完全正确，但如果替代方案甚至遥不可及，那就太难打扰了。