当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中突出显示某些文本时（例如，他突出显示：来自main1 div的' blue some text '或来自main2的' test2 text con '） - 如何从<span class="username>{username}</span>获取用户名的价值？

换句话说，当用户突出显示main1 div中的某些文本时，我需要获取值：Username_1，当他突出显示main2 div中的某些文本时，我应该得到值：Username_2等。

（如果它更容易，我也可以添加id到span）。我只能使用普通的Javascript（而不是jQuery）。谢谢。

Answer 1

您需要获取选择的父元素，然后查看父级children以查找第一个span元素。该元素的innerHTML将包含您需要的文本。

从Get parent element of a selected text和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>

Answer 2

要在页面中选择文字：

window.getSelection().toString()

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

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

Answer 3

可能会有所帮助。

工作演示：HERE

注意：检查null / no选择（可能会抛出错误） 检查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);
}