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
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> 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/
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>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 { } }); }); 