Jquery user screen selection

Question

I am working on a script that displays users on the screen (when they physically select text in the browser) and should manipulate that text.

This is what I am trying to do.

Take the selected text, find the selected text in the source line and then wrap the text that is in the source line with a specific HTML tag ( <b>, <span>, <a>)

I am using jQuery.textselect plugin .

The part that I cannot understand is how to manipulate the source text after the user selection is found.

Example: If this text is displayed on the screen: "HELLO WORLD"

The source text is HELLO WORLD, the user selects HELLO, then the script searches the source text to select the user and transfers the HELLO with tags <b>, and then displays the new original text ... it makes sense

Sorry for the confusion and thanks for the help!

Answer 1

This is the closest I could get. This is not ideal for several reasons (if you highlight Hello, it will highlight ALL greetings). The text selection plugin is not particularly standardized, and I could not determine a way to find out WHERE in the text, in addition to positioning the pixels, the event took place, since the variable eis an object of the event, and not a $ (this) -style DOM element.

$(function() {
  $(document).bind('textselect', function(e) {
        $('body').html($('body').html().replace(e.text,"<b>"+e.text+"</b>"));
    });
});

jQuery , DOM, .

EDIT: , DOM:

$(function() {
  $(document).bind('textselect', function(e) {
      var $this = $(e.target);
      $this.html($this.html().replace(e.text,"<b>"+e.text+"</b>"));
    });
});

.