单击jQuery拆分或连接文本

我想用鼠标点击分割或连接文本。作为我正在做的项目的一部分

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

目前，我的文本中的每个单词都包含在一个span中：

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

单击原文中的

t

，应得出：

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

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

text

我假设这可以通过jQuery

replaceWith（）

函数实现，但我不太确定如何检测单个字符（理想情况下，我希望避免每个字符都有额外的跨度，因为我的文本可能相对较长）？

---

如果您能为我的实现需求和/或建议提供帮助，我将不胜感激。

除非某个字符有自己的DOM元素[1]，否则您无法检测和处理该字符上的单击，因此您需要额外的跨距。唯一的例外是在TextField或TextArea中，单击会在触发OnClick处理程序之前移动光标。在那里，当前光标位置将包含您需要的信息，并且在OnClick处理程序中可用

---

[1] 这并不完全是真的，但如果替代方案是可以接受的，那就太难了。

我不知道这是否正是你想要的，但也许它会有帮助：

我使用textarea和插件检测光标位置，然后单击插入或删除空格：

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(''));
    }
});​

$('#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>');
    }
});​

演示：

$('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(''));
    }
});​

$('#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>');
    }
});​

---

不带文本框：

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(''));
    }
});​

$('#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>');
    }
});​

$（'#t'）.html（'+$（'#t'）.text（）.split（''）.join（''）+''）.find（'span'）。单击（函数（）{
if（$（this）.next（）.text（）=''）{
$（this.next（）.remove（）；
}否则{
$（本）。在（''）之后；
}
});​

演示：

$('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(''));
    }
});​

$('#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>');
    }
});​

---

太棒了，闻起来像大学作业，不是吗？B-）谷歌一些API，如

split

&

map

不，我不是学生，也不是作业：）这是一个关于将亚洲语言（特别是汉语）拆分成单词的个人项目。你为什么要拆分？您可以只添加一个空白

奇怪的示例，它以两个单词开头：te和xt。此外，我仍然无法告诉您应该单击什么来拆分或合并内容。我想直接在网页上为亚洲文本创建一些简单的编辑功能（拆分/合并单词和旋转类）。因为我想标记文本中的一些单词，所以我需要每个单词都包含在一个span中。假设每个字符都有自己的span，例如，在我上面的示例中，您是否有任何关于如何操作的指示？使用文本字段会限制我在字段中使用的丰富格式，对吗？如果这不是OP想要的，那听起来肯定像他要求的。谢谢！这正是我想要的结果（除了当前的JSFIDLE允许添加多个空格，但这是一个很容易修复的小细节），但我想知道如何在没有文本字段的情况下实现它（如果有必要，每个字符的跨距都可以）.@CarlJohan使用spans更新了我的答案。我认为如果不在每个字符周围使用跨距，就无法可靠地获取单击的字符。