How can I wrap the previous, current, and next word inside a tag using jQuery?

Question

Not sure if the title is well chosen...

I am trying to simulate text-selection in HTML/JS/CSS to get rid of the action bubble on mobile device when truly selecting t

Answer 1

A few thoughts:

I can't see how wrapping everything in a is a viable solution. What happens when you have something like this?

The important terms will be bolded in this text

When you select The important, you'll have some tag mayhem where the tag's body wants to overlap the tag's body.

I think a better solution would be to have multiple selection tags with the same class. Each time an HTML tag is encountered, you skip over the tag and create a new selection . Then, when you reposition your carets, you simply do this:

$(".selection:first").prepend(startCaret);
$(".selection:last").append(endCaret);

I played around with this idea and it was working fine for me. If you want to get really fancy, you could try and merge selection s when you find a closing tag after you've encountered its corresponding start tag, but that would be a lot of work.

---

Your carets aren't moving correctly because you specify a style of absolute positioning. Change that to relative and give each caret a body of  . You'll have to play around with a few other positioning CSS settings to get it to look just right, but it moves as you'd expect with those changes (example here).

---

As I was playing with some ideas for this, I tried doing absolute positioning on the carets so they didn't have to be moved around inside the selection . That was a mistake. I ran into problems with paragraphs that overflowed to a new line without any markup. Stay with your idea of having the carets inside of your selection .

---

Lastly, a few thought questions:

• Are you going to limit the scope? (i.e., if you start selecting inside a

  tag, don't allow selection to spill outside of that tag to the next

  or whatever follows)

• Are certain tags going to be unselectable? (i.e., ,
  验证码

   看不清?
  提交回复

  热议问题