How to get highlighted words and wrap it in new element with data-attribute?

Question

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

CSS:

.highlight {
  color: red;
}

JS:

$(function(){
    
  $('p').click(function(){
    // get highlighted words
    
    // get user input
    var user_input = window.prompt();
    
    // put highlighted words in <span class="highlight"></span> element
    // and add data-id to the span element
    // expected output:
    // <p>... <span class="highlight" data-id="user input here">highlighted words here</span> ...</p>
  });
  
});

I have a block of text in p tag and I want it to be like this:

User select some word(s) inside the block
User enter something inside the prompt box
Put the highlighted word(s) inside span tag with data-attribute (I'd called it data-id) and this data-attribute value is coming from the prompt (step 2 above)

How do I achieve this?

You want to edit the same paragraph and add selected text inside span and put it back to same paragraph or as different select? — Guruprasad J Rao, May 27 '16 at 06:52
@GuruprasadRao I want to edit the same paragraph and add selected text inside span and put it back to same paragraph. — Zulhilmi Zainudin, May 27 '16 at 06:53
Thanks @anu & @Guruprasad Rao. Can you please update the script without using `try` and `catch`? I'm not really familiar with `try` and `catch`. Thanks. — Zulhilmi Zainudin, May 27 '16 at 07:01
@ZulhilmiZainudin There is no harm in having `try catch`.. Its just for safety so that your `code` don't break.. :) — Guruprasad J Rao, May 27 '16 at 07:13

score 2 · Answer 1 · edited May 23 '17 at 10:28

Extending this post for your use case

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }
    
        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var val = prompt("give me value");
        var mytext = selectHTML();
        $('span').addClass('highlight').attr('data-id',val);
    });
});

.highlight{
color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>
<input id="changeColor" type="button" value="Select text and Change Style" />

score 1 · Accepted Answer · edited Feb 27 '23 at 16:45

With the help of the JSFiddle given in the comment you can achieve it as below:

function selectHTML() {
  try {
    if (window.ActiveXObject) {
      var c = document.selection.createRange();
      return c.htmlText;
    }

    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
  } catch (e) {
    if (window.ActiveXObject) {
      return document.selection.createRange();
    } else {
      return getSelection();
    }
  }
}

$(function() {
  $('p').click(function() {
    var selected = selectHTML();
    var user_input = window.prompt();
    $('span').addClass('highlight').attr('data-id', user_input);
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan
  augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet
  gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

How to get highlighted words and wrap it in new element with data-attribute?

2 Answers2