How to add tag to a selected text in JQuery

Question

i have a big paragraph look like this for example

<p> hello this is my paragraph </p>

so i want to append a tag to the selected text in the whole text so if i highlight on "my paragraph" i want the paragraph to be as the following

<p> hello this is <span>my paragraph</span></p>

Thank you all

Possible duplicate of [replace selected text in contenteditable div](https://stackoverflow.com/questions/3997659/replace-selected-text-in-contenteditable-div) — Just code, Dec 24 '18 at 05:38
Duplicate of : https://stackoverflow.com/questions/17836488/jquery-surround-highlighted-text-with-span — Abhay Padda, Dec 24 '18 at 06:11

Abhay Padda · Answer 1 · 2018-12-24T06:14:38.757

You can easily do this using javascript by using surroundContents() for this.

<div onclick="addSpanEle()">hello this is my paragraph</div>

function addSpanEle() {
    var span = document.createElement("span");

    if (window.getSelection) {
        var selectedText = window.getSelection();
        if (selectedText.rangeCount) {
            var range = selectedText.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            selectedText.removeAllRanges();
            selectedText.addRange(range);
        }
    }
}

For jquery: check fiddle demo here: http://jsfiddle.net/BGKSN/24/

Courtesy: https://stackoverflow.com/a/17836828/10153495

the OP wants jquery answer not JS – לבני מלכה Dec 24 '18 at 05:48 — לבני מלכה, Dec 24 '18 at 05:48

score 1 · Answer 2 · answered Dec 24 '18 at 06:11

I was searching for your answer and found: Add tags around selected text in an element.

Here is the main code that I copied from the provided link.

<p> My sample paragraph </p>

<style>
    span {color: red;}
</style>
<script type="text/javascript">

    function getSelectedText() {
        t = (document.all) ? document.selection.createRange().text : document.getSelection();
        return t;
    }

    $('body').mouseup(function(){
        var selection = getSelectedText();
        var selection_text = selection.toString();

        // How do I add a span around the selected text?

        var span = document.createElement('SPAN');
        span.textContent = selection_text;

        var range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);
    });

</script>

score 0 · Answer 3 · answered Dec 24 '18 at 05:43

Find desire contain and wrap with span like below.

$("p:contains('my paragraph')").html(function(_, html) {
  return html.replace(/(my paragraph)/g, '<span class="yourclass">$1</span>');
});

.yourclass {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> hello this is my paragraph </p>

score 0 · Answer 4 · answered Dec 24 '18 at 06:04

Good start, but he wants to be able to select text in a div. Try this:

HTML:

<div class="selectMe">
  This is some text 'n stuff. Select part of me and cool stuff will happen!
</div>
<button id="highlight">Make Stuff Happen</button>

CSS:

.selectMe {
  margin-bottom: 2em;
}

button {
  cursor: pointer;
}

.highlight {
  background-color: red;
}

JS:

if (!window.x) {
  x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
  var t = '';
  if (window.getSelection) {
    t = window.getSelection();
  } else if (document.getSelection) {
    t = document.getSelection();
  } else if (document.selection) {
    t = document.selection.createRange().text;
  }
  return t;
}

$(document).ready(function() {
  $("#highlight").click(function() {
    var selText = x.Selector.getSelected();
    console.log(selText.focusNode);
    if (selText.focusNode.length > 0) {
      var para = $(".selectMe").text();
      para = para.replace(selText, '<span class="highlight">' + selText + '</span>');
      $(".selectMe").html(para);
    } else {

    }
  });
});

This is very rudimentary, you'll obviously want to tweek it. I've used similar code to make a soft keyboard for my POS software I'm writing. — Jay, Dec 24 '18 at 06:07
Somehow that fiddle got deleted. Try this one: https://jsfiddle.net/cloudulus/pz6enyg3/2/ — Jay, Dec 24 '18 at 19:19

How to add tag to a selected text in JQuery

4 Answers4