jQuery wrap text without container

Question

I've got this html

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

I want to wrap inside <span> clicked part of text. So if you click on This text is part you should get

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

And same with any atomic part of the div

I'm trying to make $('div').click(); event but I can't find out how to detect only the clicked part if it is not wrapped inside something (it's ok with <strong>really</strong> part but not with part before and after it)

See this post to answer part of your question [get word click in paragraphs](http://stackoverflow.com/questions/4643432/get-word-click-in-paragraphs) — user1477388, Sep 10 '13 at 19:26
Is it possible to make this wrapping only after click and restore not clicked part to initial structure? And also how would look proper replace regex (not for single word but for atomic part = to nearest tag — Adam Pietrasiak, Sep 10 '13 at 19:29
events do not fire on textnodes, only the surrounding element, so you'll have to wrap the textnodes first, then apply the event handlers, or at least that's how you should do it. — adeneo, Sep 10 '13 at 19:32
The point is I want to avoid changing the dom as its some part of some custom WYSIWYG script or at least I would like to be able to restore oryginal structure somehow. — Adam Pietrasiak, Sep 10 '13 at 19:33

nrabinowitz · Accepted Answer · 2013-09-10T19:35:27.343

3

You might want to look at the .contents() method. This will give you text nodes as well as wrapped nodes, so you can wrap them. To adjust the example from the jQuery docs:

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

It sounds like you want to wrap the content after click, which I think might be quite difficult. If possible, it would be better to wrap the content before the user clicks, then apply a style to the span they clicked - this is much more straightforward. If you use the code above to wrap, you can then apply a handler like

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

edited Sep 10 '13 at 19:35

answered Sep 10 '13 at 19:29

nrabinowitz

55,314
10
149
165

how to detect clicked one using it? – Adam Pietrasiak Sep 10 '13 at 19:30
+1 I didn't know about `.contents()`. Pretty new thing I learned today. Thank you! – Praveen Sep 10 '13 at 19:31
The point is I want to avoid changing the dom as its some part of some custom WYSIWYG script or at least I would like to be able to restore oryginal structure of unclicked/unchanged parts somehow. Ok. I guess it would be hard to do but your solution is indeed a way to do it. Thanks! – Adam Pietrasiak Sep 10 '13 at 19:34
@Kluska000 - I think you may find it impossible to single out a clicked node. If you really, really don't want to manipulate the DOM you might be able to get it by checking the X/Y position of the click, and then doing a hit test against each node in `.contents()`. But it's a pretty brute-force approach. – nrabinowitz Sep 10 '13 at 19:41

jQuery wrap text without container

1 Answers1