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“source”：

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"。

使用javascript进行特殊粘贴

4 个答案: