使用父子標記獲得孤立文本，子元素正在分隔

我有一個編程挑戰，我想知道最接近它的無錯方法是什麼。使用父子標記獲得孤立文本，子元素正在分隔

基本上，我有以下HMTL：

<p id="first"> 
    Hello lorem ispum 
    <a id="link" href="...">Link</a> 
    linkety link blag 
</p>

（該ID是在通過的getElementById越來越概念證明：在現實中，我得到的DOM引用元素的元素解析頁）。

「Hello lorem ispum」和「linkety link blag」文本片段是孤立的 - 我無法直接訪問它們。我只能使用段落標記或內部「a」標記訪問整個事物。

我想要的是段落中東西的元素數組。如果他們需要獲取包裝標籤或其他內容以獲取用JavaScript修改的引用，那沒問題。例如，末端結果：

para[0] = <span>Hello lorem ispum</span> 
para[1] = <a id="link" href="...">Link</a> 
para[2] = <span>linkety link blag</span>

DOM對象，我可以改變/訪問鏈接到頁面（而不是字符串）上有什麼。

它只是一堆解析段落標記的innerHTML？

這是一款適用於殘疾人士的Chrome插件，只需使用向上和向下箭頭鍵閱讀文本即可。如果您對如何解決此問題有更好的想法，請告訴我！

來源

2012-11-30 aeharding

所以你需要數組中的文本節點的值？像[「你好lorem ispum」，「linkety鏈接blag」]？ – lostsource

你可以使用該元素的[childNodes]（https://developer.mozilla.org/en-US/docs/DOM/Node.childNodes） – Musa

這是一個很好的起點...感謝您的提示，穆薩。 – aeharding

您可以在childNodes

var para = document.getElementById('first'); 

var arr = []; 

for (var i = 0; i < para.childNodes.length; i++) { 
    var elem = para.childNodes[i]; 
    if (elem.nodeType === 3) { 
     var newElem = document.createElement('span'); 
     newElem.className = 'a'; 
     newElem.innerHTML = trim(elem.nodeValue); 
     elem.parentNode.insertBefore(newElem, elem.nextSibling); 
     para.removeChild(elem); 
     arr.push(newElem); 
    } 
    else { 
     arr.push(elem) 
    } 

} 
console.log(arr); 

function trim(str) { 
    return str.replace(/^\s+|\s+$/g, ""); 
}

Check Fiddle

來源

2012-11-30 22:05:16

這是非常接近我正在尋找，但我得到[「 [對象文本]」， Link ，「 [對象文本]」] – aeharding

@aeharding。檢查更新的代碼 –

（現在工作，但是...）嗯，我不希望它們是字符串，但我想要頁面上的實際HTML與孤立文本獲取標籤，然後獲取對span標籤的引用數組。 – aeharding

var paragraph = document.getElementById('first'), 
    list = paragraph.childNodes, 
    l = list.length, 
    el, container, i = 0, result = []; 

for(i; i < l; i++) { 
    el = list[i]; 
    if (el.nodeType === 3) { 
     container = document.createElement('span'); 
     container.className = 'wrapper'; 
     // we want to remove line breaks from the text 
     container.innerText = el.nodeValue.replace(/(\r\n|\n|\r)/gm,""); 
     el = container; 
    } 
    result.push(el); 
}

JSFiddle

我們想從文本節點刪除換行符的原因是，這些將在時被轉換成 。不要以爲這是你需要的。

你的具體情況，result將是這樣的：

[SPAN，LINK，SPAN]

來源

2012-11-30 22:02:56 spliter

謝謝，但我需要實際的引用（其中實際的HTML更改爲給孤立文本引用span標記） – aeharding

@aeharding，我更新了您的用例的代碼段和小提琴。 – spliter

非常好。感謝後續。 :) – aeharding

您可以不在其他元素的文本節點搶文本像這樣通過遍歷標籤的子節點來看，在節點類型，看看哪個節點是文本節點：

var top = document.getElementById("first"); 
var node = top.firstChild; 
while (node) { 
    // get text from text nodes that aren't contained in elements 
    if (node.nodeType === 3) { 
     // node.nodeValue is the text in the text node 
    } else if (node.nodeType === 1) { 
     // node is an element here so you can get innerHTML or textContent or whatever you want 
    } 
    node = node.nextSibling; 
}

日夜不停摹演示：http://jsfiddle.net/jfriend00/YvBpw/

如果你只是想從整體標籤（包括所有元素）的純文本和做跨瀏覽器，您可以使用此：

var t = document.getElementById("first"); 
var text = t.textContent || t.innerText;

這將是一個標記中的所有內容的HTML剝離文本轉換。

來源

2012-11-30 22:02:58 jfriend00

這是得到我需要的，謝謝！偉大的骨架......我會看看我是否能夠得到我的工作和回報。 – aeharding

迭代試試這個，它會創建一個跨度文本節點的內容以及與文本節點

var p = document.getElementById('first');  
var elements = [];  
for (var i = 0; i < p.childNodes.length; i++) { 
    var child = p.childNodes[i]; 
    if (child.nodeType == 3) {//text node 
     if (! /^\s+$/.test(child.nodeValue)){//skip whitespaces 
      var span = document.createElement('span'); 
      span.innerHTML = child.nodeValue; 
      p.replaceChild(span, child); 
      elements.push(span); 
     } 
    } 
    else if (child.nodeType == 1){//element node 
     elements.push(child) 
    } 
}

更換

http://jsfiddle.net/mowglisanu/t6UaJ/

來源

2012-11-30 22:39:39 Musa

工作得很好，謝謝。 – aeharding

使用父子標記獲得孤立文本，子元素正在分隔

回答

相關問題