從粘貼數據中提取所有字體節點

我可以在javascript中提取粘貼數據的內容。我想提取粘貼數據中的所有字體節點。從粘貼數據中提取所有字體節點

通過使用document.getElementsByTagName('font')從整個容器中提取所有字體節點。但我只想從粘貼的數據中提取，以便我可以將字體改爲「Open Sans」。詳細介紹：

我有一個CONTENTEDITABLE的div容器，即

<div id="content" contenteditable="true">

我已經加入

document.getElementById('content').addEventListener("paste", onPaste);

在功能

function onPaste(evt) 
{ 
    var pastedData = evt.clipboardData.getData('text/html'); 
    var fontNodes = document.getElementsByTagName('font'); 
    for(var i=0; i<fontNodes.length; i++) 
    { 
     fontNodes[i].setAttribute('face', 'open sans'); 
    } 
}

結果這個片段的：它提取所有整個文檔中的字體節點，並將其更改爲開放的sans。

預期結果：我的要求是僅從要粘貼的數據中提取所有字體節點，並將其中的字體節點更改爲打開sans。

不知怎的，當我這樣做：

pastedData.getElementsByTagName('font');

我得到一個錯誤。請幫忙。

來源

2016-03-27 Aarzoo Trehan

的機會都沒有，現在來測試它，但我看到你的for循環有一個bug：你應該使用fontNodes.length。 –

此外，字體標記是超級棄用。更好地使用cos來造型。但你可能有一個理由...... –

clipboardData.getData()給你一個字符串。

除非將該字符串解析爲DOM樹，否則沒有節點。

function onPaste(evt) { 
 
    var pastedData = evt.clipboardData.getData('text'), 
 
     tempDiv = document.createElement('div'), 
 
     fontNodes, i; 
 

 
    tempDiv.innerHTML = pastedData; // parsing happens here, NOW we have nodes 
 

 
    fontNodes = tempDiv.getElementsByTagName('font');  
 
    for(i = 0; i < fontNodes.length; i++) { 
 
     fontNodes[i].setAttribute('face', 'open sans'); 
 
    } 
 

 
    pastedData = tempDiv.innerHTML; // convert it back to string 
 

 
    document.getElementById('target').textContent = pastedData; 
 
} 
 

 
document.getElementById('test').onpaste = onPaste;

<textarea id="test" rows="6" cols="75" placeholder="Paste HTML here"></textarea> 
 

 
<pre id="target"></pre>

來源

2016-03-27 10:39:05 Tomalak

從粘貼數據中提取所有字體節點

回答

相關問題