CODEWITHSUNDEEP
javascripthtml
NonCoder
NonCoder

Reputation: 245

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

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.

Upvotes: 1

Views: 2833

Answers (3)

Bladepianist
Bladepianist

Reputation: 490

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/

Upvotes: 1

Nielarshi
Nielarshi

Reputation: 1136

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

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

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>

Upvotes: 2

Related Questions