5

There are a lot of questions answered how to select text from one element. For example, from this answer:

function surroundSelection() {
    var span = document.createElement("span");
    span.style.fontWeight = "bold";
    span.style.color = "green";

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

But how do we do this for multiple tags? For example, if this is the markup

<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur START HERE adipisicing elit.</p>
<p>Eaque et END HERE possimus at minima, illo?</p>

If the user selects the the text from the second and third paragraph, how can the be wrapped in their own individual divs

<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur <span>adipisicing elit.</span></p>
<p><span>Eaque et</span> possimus at minima, illo?</p>

I hope this "broken" example helps

relidon
  • 2,142
  • 4
  • 21
  • 37
  • Can you explain it a little bit more, don't understand the result you want. – Macinar Nov 20 '19 at 14:45
  • @tmach say you have 5 paragraphs. You select the last sentence from paragraph 2 and some words from paragraph 3. You want these words to we wrapped into `span` tags. the end result being two span tags, one in 2nd paragraph and one in the third – relidon Nov 20 '19 at 14:54
  • Please give an example of what you want after. – Imrul.H Nov 20 '19 at 14:55
  • @Imrul.H I'm not sure how: it's something like this extention https://chrome.google.com/webstore/detail/weava-highlighter-pdf-web/cbnaodkpfinfiipjblikofhlhlcickei?hl=en-GB BUT the screenshot doesn't do justice. The ability to highlight a running sentence from one element to the other! – relidon Nov 20 '19 at 15:00
  • @Imrul.H here's what I want https://jsbin.com/magunemela/edit?html,js,output – relidon Nov 20 '19 at 15:05
  • 1
    @tmach Heres what I want https://jsbin.com/magunemela/edit?html,js,output – relidon Nov 20 '19 at 15:06
  • 1
    Ok, now I understand I will see for a solution. – Macinar Nov 20 '19 at 15:08
  • You can try with a bind function (mouseup) for the body and inside something like: window.getSelection() and document.selection.createRange(). Not exactly sure how you want this. – Imrul.H Nov 20 '19 at 15:26

1 Answers1

0

You can use window.getSelection & window.getSelection.toString().

I made a fast example which displays the selected text in a h4 element.

function getSelectedText() {
    let selectedText = document.getElementById('selectedText');
    
    if (window.getSelection) {
        selectedText.innerHTML = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        selectedText.innerHTML = document.selection.createRange().text;
    }
 
}
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur START HERE adipisicing elit.</p>
<p>Eaque et END HERE possimus at minima, illo?</p>
<input type="button" onclick="getSelectedText()" value="Get Selection">
<h4 id="selectedText"></h4>

You can also see the code in action at Codepen.

Macinar
  • 108
  • 8
  • No, that's not what I was after. I want them highlighted where they are like this https://jsbin.com/vigawunogi/edit?html – relidon Nov 20 '19 at 15:33