從javascript中的選擇性節點獲取文本

Question

從下面的HTML代碼我想獲取除'text_exposed_hide'span元素之外的所有文本。

最初我試圖從沒有類名的span中獲取文本。 但是這種方法忽略了不在任何範圍內但僅在div內的文本。

我如何獲得所需的文本。我需要在純JavaScript的代碼

<div id="id_4f1664f84649d2c59795040" class="text_exposed_root"> 
9jfasiklfsa 
    <span>CT:PFOUXHAOfuAI07mvPC/</span> 
    <span>NAg==$1ZUlmHC15dwJX8JNEzKxNDGGT</span> 
    dwL/L1ubjTndn89JL+M6z 
    <span class="text_exposed_hide">...</span> 
    <span class="text_exposed_show"> 
    <span>MDmclkBPI/</span> 
    <span>s4B7R9hJyU9bE7zT10xkJ8vxIpo0quQ</span> 
    55 
    </span> 
    <span class="text_exposed_hide"> 
    <span class="text_exposed_link"> 
     <a onclick="CSS.addClass($("id_4f1664f84649d2c59795040"), "text_exposed");">See More</a> 
    </span> 
    </span> 
</div 

編輯：

我試圖使用類名稱「text_exposed_hidden」刪除節點，然後從剩餘的節點獲取文本。以下是代碼。但它不起作用 控制不進入循環。即使visibleDiv.removeChild（textExposedHideNodes [0]）也不起作用。我在Chrome瀏覽器中運行這個16.0

//msg is the parent node for the div 
    visibleDiv = msg.getElementsByClassName("text_exposed_root"); 

    textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide"); 
    for(var n = 0;n < textExposedHideNodes.legth ; n++) { 
     console.log("Removing"); 
     msg.removeChild(textExposedHideNodes[n]); 
    } 

    return visibleDiv.innerText; 

Answer 1

此代碼將收集文本節點的所有文字沒有一個父母與class="text_exposed_hide"誰並將結果放入一個數組中。

它做這個非破壞性不刪除任何東西：

function getTextFromChildren(parent, skipClass, results) { 
    var children = parent.childNodes, item; 
    var re = new RegExp("\\b" + skipClass + "\\b"); 
    for (var i = 0, len = children.length; i < len; i++) { 
     item = children[i]; 
     // if text node, collect its text 
     if (item.nodeType == 3) { 
      results.push(item.nodeValue); 
     } else if (!item.className || !item.className.match(re)) { 
      // if it doesn't have a className or it doesn't match 
      // what we're skipping, then recurse on it to collect from it's children 
      getTextFromChildren(item, skipClass, results); 
     } 
    } 
} 

var visibleDiv = document.getElementsByClassName("text_exposed_root"); 
var text = []; 
getTextFromChildren(visibleDiv[0], "text_exposed_hide", text); 
alert(text); 

如果你想在一個字符串中的所有文本，你可以與串連它：

text = text.join(""); 

你可以看到它的工作這裏：http://jsfiddle.net/jfriend00/VynKJ/

它是如何工作的：

1. 創建一個數組把結果
2. 發現，我們打算對根開始
3. 呼叫getTextFromChildren()根
4. 把孩子們通過的孩子，根的對象
5. 循環
6. 如果我們發現一個文本節點，收集了文成的結果陣列
7. 如果我們發現沒有一個類名或誰的類名不匹配，我們忽略了一個無論是元素節點，然後調用getTextFromChildren()遞歸地使用該元素作爲新根來收集該元素中的所有文本

Answer 2

這是你在找什麼？

/*Get Required Text 
    Desc: Return an array of the text contents of a container identified by the id param 
    Params: 
     id = Container DOM object id 
*/ 
function getRequiredText(id) 
{ 

    /*Get container, declare child var and return array*/ 
    var el = document.getElementById(id), 
     child, 
     rtn = Array(); 

    /*Iterate through childNodes*/ 
    for(var i = 0; i < el.childNodes.length; i++){ 

     /*Define child*/ 
     child = el.childNodes[i] 

     /*If node isn't #text and doesn't have hidden class*/ 
     if(child.nodeName !="#text" && child.className != "text_exposed_hide") 
      rtn.push(child.textContent); 
    } 

    /*Return results*/ 
    return rtn; 
} 

這將遍歷所有childNodes，包括嵌套的childNodes，並將所有文本放入數組中。如果你想排除嵌套的孩子，用「替換」if語句。

if(child.nodeName !="#text" && child.className != "text_exposed_hide" && child.parentNode == el) 

Answer 3

除刪除節點，爲什麼不它的innerText/HTML設置爲空字符串：

//msg is the parent node for the div 
visibleDiv = msg.getElementsByClassName("text_exposed_root"); 

textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide"); 
for(var i = 0;i < textExposedHideNodes.legth ; i++) { 
    //store to temp for later use 
    textExposedHideNodes[i].txt = textExposedHideNodes[i].innerHTML; 
    textExposedHideNodes[i].innerHTML = ''; 

} 

return visibleDiv.innerText;