Question

我可以在javascript中提取粘贴数据的内容。我想提取粘贴数据中的所有字体节点。

使用document.getElementsByTagName('font')从整个容器中提取所有字体节点。但是我想只从粘贴的数据中提取，这样我就可以将字体面改为＆＃34; Open Sans＆＃34;。详细说明：

我有一个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。

不知何故，当我这样做时：

pastedData.getElementsByTagName('font');

我收到错误。请帮忙。

Answer 1

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>

从粘贴的数据中提取所有字体节点

1 个答案: