当DIV中的文本高亮显示时，如何获得DIV中Span的值?(Javascript)

Question

我有一个div列表，如下所示：

<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>

当用户突出显示这些div中的一些文本时（例如，他突出显示：main1div中的"blue some text"或main2中的"test2 text-con’）——如何从<span class="username>{username}</span>中获取username的值？

换句话说，当用户高亮显示main1div中的一些文本时，我需要得到值：Username_1，当他高亮显示main2div中的某些文本时，我们应该得到值：Username_2，等等。

（如果更容易的话，我也可以将id添加到跨度中）我只能使用纯Javascript（而不是jQuery）。非常感谢。

Answer 1

您需要获得所选内容的父元素，然后查看父元素的children以找到第一个span元素。该元素的innerHTML将包含您需要的文本。

从所选文本的get parent元素和get the Highlighted/selected text:中借用"get selection"one_answers"find selection’s parent"代码

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>

Answer 2

要获取页面中选择的文本：

window.getSelection().toString()

我会让你自行决定如何使用，因为坦率地说，我对此没有任何灵感。但我怀疑您可能会通过将结果存储在var中并将其传递给您的textform来使用它：）。

我的尝试：http://jsfiddle.net/Bladepianist/Lj4x0xks/

Answer 3

这可能会有所帮助。

工作演示：这里

注意：检查空/无选择（可能引发错误）检查JS函数

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