javascript - 高亮显示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>