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 — user1477388
– user1477388, Commented Sep 10, 2013 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 — pie6k
– pie6k, Commented Sep 10, 2013 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
– adeneo, Commented Sep 10, 2013 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. — pie6k
– pie6k, Commented Sep 10, 2013 at 19:33

nrabinowitz · Accepted Answer · 2013-09-10 19:35:27Z

4

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, 2013 at 19:35

answered Sep 10, 2013 at 19:29

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pie6k Over a year ago

how to detect clicked one using it?

Praveen Over a year ago

+1 I didn't know about .contents(). Pretty new thing I learned today. Thank you!

pie6k Over a year ago

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!

nrabinowitz Over a year ago

@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.

Collectives™ on Stack Overflow

jQuery wrap text without container

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related