如何在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格或'test2 text con'from main2） - 如何從<span class="username>{username}</span>獲取用戶名的值？

換句話說，當用戶從MAIN1 DIV突出一些文字，我需要得到的值：USERNAME_1和時，他強調了MAIN2專區內一些文字，我應該得到的值：USERNAME_2等

（如果更簡單，我也可以將ID添加到跨度）。我只能使用純Javascript（而不是jQuery）。謝謝。

Answer 1

您需要獲取所選內容的父元素，然後查看父級的children以查找第一個span元素。該元素的innerHTML將包含您需要的文本。

借用Get parent element of a selected text和Get the Highlighted/Selected text 「獲得選擇」 和 「查找選擇的父」 代碼：

window.getSelection().toString() 

：

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

來獲取文本的頁面中選擇我會讓你自己決定如何使用，因爲坦率地說，我沒有靈感那個。但我懷疑你可能通過將結果存儲在var中並將其傳遞給你的textform來使用它:)。

我嘗試：http://jsfiddle.net/Bladepianist/Lj4x0xks/

Answer 3

可能，這將幫助。

工作演示：HERE

注：檢查空/無選擇（可能會引發錯誤） 檢查的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); 
}