How to get the value of Span within a DIV when text within DIV is highlighted? (Javascript)

Question

I have a list of divs that look like below:

<div id="main1">
    <span class="username">Username_1</span>
    white some text content inside div...
    blue some text content inside div...
    yellow some text content inside div...
</div>

<div id="main2">
    <span class="username">Username_2</span>
    another test1 text content inside div...
    another test2 text content inside div...
    another text test3 content inside div...
</div>

When user highlights some text inside of these divs (for example, he highlights: 'blue some text' from main1 div or 'test2 text con' from main2) -- how to get the value of username from <span class="username>{username}</span>?

In other words, when user highlights some text from main1 div, I need to get the value: Username_1 and when he highlights some text within main2 div, I should get the value: Username_2, etc.

(if it's easier, I could add id to the span too). I can only use plain Javascript (not jQuery). Thank you.

Are you sure you don't just want to listen for click events on those DIVs? Why selection, specifically? What's the prevent the user from highlighting text from both divs simultaneously? — bvaughn, Apr 04 '15 at 16:06
Possible duplicate of : http://stackoverflow.com/questions/3731328/on-text-highlight-event — Bladepianist, Apr 04 '15 at 16:06
User selects some text within a div because he wants to quote this particular text (I have a different JS function for quoting). Ie. he selects some text and clicks on a button to be taken to a textform (and this selected text is pasted into the textform). But I prefer to create just one button (currently there is each button separately near the div). — NonCoder, Apr 04 '15 at 16:09

score 2 · Answer 1 · edited May 23 '17 at 12:13

You'll need to get the parent element of the selection, then look through the parent's children to find the first span element. That element's innerHTML will contain the text you need.

Borrowing "get selection" and "find selection's parent" code from Get parent element of a selected text and Get the Highlighted/Selected text:

function checksel() {
  var txt = getSelectionText();
  var parent = getSelectionParentElement();
  var user = null;

  if (txt && parent)
    for (var i = 0; i < parent.children.length; ++i) {
      var kid = parent.children[i];

      if (kid.tagName.toLowerCase() == "span") {
        user = kid.innerHTML;
      }
    }

  var p = document.createElement('p');

  if (user) {
    p.innerHTML = "user: '" + user + "'. Text: '" + txt + "'.";
  } else {
    p.innerHTML = "No user or no selection.";
  }

  document.body.appendChild(p);
}

function getSelectionParentElement() {
  var parentEl = null,
    sel;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      parentEl = sel.getRangeAt(0).commonAncestorContainer;
      if (parentEl.nodeType != 1) {
        parentEl = parentEl.parentNode;
      }
    }
  } else if ((sel = document.selection) && sel.type != "Control") {
    parentEl = sel.createRange().parentElement();
  }
  return parentEl;
}

function getSelectionText() {
  var text = "";
  if (window.getSelection) {
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
  }
  return text;
}

<div id="main1">
  <span class="username">Username_1</span>
  white some text content inside div... blue some text content inside div... yellow some text content inside div...
</div>

<div id="main2">
  <span class="username">Username_2</span>
  another test1 text content inside div... another test2 text content inside div... another text test3 content inside div...
</div>

<button id="check" onclick="checksel()">check</button>

Bladepianist · Answer 2 · 2015-04-04T16:43:40.237

1

To get the text selected in the page :

window.getSelection().toString()

I'll let it to your discretion to find how to use because frankly speaking, I've got no inspiration with that. But I suspect you might use it by storing the result in a var and pass it to your textform :).

My try : http://jsfiddle.net/Bladepianist/Lj4x0xks/

edited Apr 04 '15 at 16:43

answered Apr 04 '15 at 16:29

Bladepianist

490
8
15

I modified it. Hope it suits you :). Edit : I did put the script in html because with jsfiddle, it was detected. Should work if you use a separate js file ;) – Bladepianist Apr 04 '15 at 17:24
Still no alert - maybe the jsfiddle link is not correct.. ok , will see.. thanks. – NonCoder Apr 04 '15 at 17:29
I'd forgot to update. Check now and really sorry ^^" – Bladepianist Apr 04 '15 at 17:30
That might be browser issue. Which one are you using ? I'm on chrome here – Bladepianist Apr 04 '15 at 17:35
1

I installed firefox, made some tweaking and tested it : Working. Still working with chrome and even in IE (yeah, I did opened it for this case). – Bladepianist Apr 04 '15 at 18:21

score 0 · Answer 3 · answered Apr 04 '15 at 16:41

May be this will help.

WORKING DEMO : HERE

Note : check for null / no selection (might throw error) Check for the JS function

HTML

<div id="main1">
    <span class="username">Username_1</span>
    white some text content inside div...
    blue some text content inside div...
    yellow some text content inside div...
</div>

<div id="main2">
    <span class="username">Username_2</span>
    another test1 text content inside div...
    another test2 text content inside div...
    another text test3 content inside div...
</div>

<button onclick="getSelectedSpan()">Get Span innerHTML</button>

JS

function getSelectedSpan() {

  // get the base node of the selected text
  var baseNode = window.getSelection().baseNode;

  // get the nearest parent div of base node
  var nearestParentDiv = baseNode.parentNode.closest("div");

  // get the spans inside the div
  var spanList = nearestParentDiv.getElementsByTagName("span");

  // first span is what you want
  console.log(spanList[0].innerHTML);
}

How to get the value of Span within a DIV when text within DIV is highlighted? (Javascript)

3 Answers3