用javascript特殊粘贴

Question

我需要解释从电子邮件中复制的文本。目前，用户复制电子邮件的文本并将其粘贴到 HTML 文本区域中。我已经有了 90% 的解决方案，但这里有一个案例让我很困惑。数据存储在电子邮件的表格中。这是该数据的一行，可能很容易有 50 行或更多行，格式类似：

<tr>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">WI</span><o:p></o:p></p>
</td>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">BARABOO 53913</span><o:p></o:p></p>
</td>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">8:00</span><o:p></o:p></p>
</td>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">VAN</span><o:p></o:p></p>
</td>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">WI</span><o:p></o:p></p>
</td>
<td valign=3D"top" style=3D"background:white;padding:0in 0in 0in 0in">
<p class=3D"MsoNormal"><span style=3D"color:black">8/29/2015</span><o:p></o:p></p>
</td>
</tr>

这是我必须适应的事情的一个例子，虽然我实际上想适应更多。

当用户粘贴该行时，它变成这样：

WI


BARABOO 53913


8:00


VAN


WI


8/29/2015

请记住，我收到了很多行，所以它们都一起运行。列的数量、顺序和格式完全不一致，有时甚至在同一个文档中。

如果我能得到这个，我可以使用我已经存在的代码来解析它：

WI BARABOO 53913 8:00 VAN WI 8/29/2015

但我几乎没有什么可做的。如果我有原始 HTML，我可以安全地解析它（它永远不会显示），但我无法得到它。有谁知道我怎样才能把它作为原始 HTML 或其他一些连贯的格式？我怀疑这是否重要，但在大多数情况下，副本的来源是 MS Outlook。

编辑：整个目标是让这个机器可解析。我不需要解析方面的帮助，我已经涵盖了。我只需要一些有用的东西来解析。

Answer 1

如果您将文本区域替换为“contentEditable”元素，例如<div>，则可以维护粘贴的 HTML。例如，试试这个，它会提醒你粘贴到其中的 html“源”：

var paste = document.getElementById('paste');
paste.onpaste = function() { setTimeout(function() { alert(paste.innerHTML); }, 1); };

#paste {
  width:200px;
  height:60px;
  border: 2px solid blue;
}

<div id="paste" contentEditable="true"></div>

请注意，内容在 onpaste 事件触发后可用，因此请使用超时。

Answer 2

看起来，对于 Chrome 和 Firefox，paste event 可能具有 DataTransfer 类型的 clipboardData 属性。它有一个采用内容类型的getData 方法，因此您可以执行此操作来检查内容是否为 HTML：

textArea.addEventListener('paste', function (e) {
  var html = e.clipboardData && e.clipboardData.getData('text/html');
  if (html) {
    // handle HTML table logic
  }
});

更新：

有趣的是，IE 有一个beforepaste 事件，看起来它有一个类似的clipboardData 对象，所以也许你可以使用这种技术来处理那个浏览器。

Answer 3

这是一个 Jquery 解决方案。

 $('#txtArea').on('paste', function() {

    setTimeout(function () { 
    var txt=$(this).val();
     $(this).val(txt.replace(/\s+/g, ' ')); 
    }, 100);



 })​;

Answer 4

解决此问题的一种方法是在粘贴数据时自行对其进行格式化。例如，您可以用空格替换换行符，然后用一个空格替换许多空格。然后使用该新值设置textarea：

text.replace(/\r|\n|\n\r/g, ' ').replace(/ +(?= )/g,'');

然后，您可以在 onpaste 事件中使用它。将text设为剪贴板内容，最后将textarea设置为新文本：

document.getElementById("text").addEventListener('paste', function (e) {
    var text = e.clipboardData.getData('text/plain');
    text = text.replace(/\r|\n|\n\r/g, ' ').replace(/ +(?= )/g,'');

    setTimeout(function(){
        document.getElementById("text").value = text;
    }, 10);
});

Here is a fiddle example。取内容粘贴到文本区，会变成"WI BARABOO 53913 8:00 VAN WI 8/29/2015"。