jQuery如何在没有容器的情况下包装文本

Question

我有这个HTML代码

<div>This text is <strong>really</strong> awesome!</div>

我希望将文本的一部分包含在<span>标签中。因此，如果您点击这段文字，您应该会得到如下结果：

<div><span>This text is </span><strong>really</strong> awesome!</div>

和 div 的任何原子部分一样

我试图制作一个 $('div').click(); 事件，但我不知道如何只检测被点击的部分，如果它没有被包含在某个元素中（对于<strong>really</strong> 部分可以，但是前后的部分不行）

- Adam Pietrasiak

---

请查看此帖子以回答您问题的一部分：获取段落中的单词点击。 - user1477388

是否可以在点击后进行包装，并将未单击部分恢复到初始结构？另外，适当的替换正则表达式是什么样子（不是针对单个单词，而是针对原子部分=最近的标记）？ - Adam Pietrasiak

事件不会在文本节点上触发，只会在周围的元素上触发，因此您需要先将文本节点包装起来，然后应用事件处理程序，或者至少应该这样做。 - adeneo

重点是我想避免更改DOM，因为它是某个自定义所见即所得脚本的一部分，或者至少我希望能够以某种方式恢复原始结构。 - Adam Pietrasiak

Answer 1

您可能需要查看.contents()方法。它会给您文本节点和包裹的节点，因此您可以对它们进行包裹。调整一下jQuery文档中的示例：

$(".container")
    .contents()
    .filter(function() {
        // get only the text nodes
        return this.nodeType === 3;
    })
    .wrap( "<span></span>" );

看起来你想在点击后包装内容，这可能会很困难。如果可能的话，最好在用户点击之前包装内容，然后对他们点击的应用样式 - 这更加简单明了。如果您使用上面的代码进行包装，那么您可以应用类似于以下的处理程序：

$(".container").on('click', 'span', function() {
    $(this).addClass('clicked');
});

- nrabinowitz

---

如何使用它来检测所点击的内容？ - Adam Pietrasiak

+1 我之前不知道 .contents() 这个方法，今天学到了一个新东西。谢谢！ - Praveen

重点是我想避免更改DOM，因为它是某个自定义所见即所得脚本的一部分，或者至少我希望能够以某种方式恢复未单击/未更改部分的原始结构。好的。我猜这很难做到，但你的解决方案确实是一种方法。谢谢！ - Adam Pietrasiak

@Kluska000 - 我认为你可能会发现很难单独选择一个点击的节点。如果你真的，真的不想操作DOM，你可以通过检查点击的X/Y位置，然后对.contents()中的每个节点进行命中测试来获取它。但这是一种相当蛮力的方法。 - nrabinowitz