Специальная паста с 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

Похоже, что paste event, для Chrome и Firefox, может иметь свойство clipboardData типа DataTransfer. То есть getData метод, который принимает тип контента, так что вы можете быть в состоянии сделать это, чтобы проверить, если содержание HTML:

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

Update:

Интересно, что IE имеет beforepaste событие, которое похоже, что у него есть аналогичный объект clipboardData, поэтому, возможно, вы сможете обработать этот браузер, используя эту технику.

Answer 2

Это решение JQuery.

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

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



})​; 

Answer 3

Один из способов справиться с этим - просто форматировать данные самостоятельно, когда они вставлены. Например, вы можете заменить новые строки пробелами, а затем заменить много пробелов на одно пространство. Затем установите 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".

Answer 4

Вы можете получить прикрепленный HTML-код, если вы замените текстовую область на элемент «contentEditable», например <div>.Попробуйте, например, он будет оповещать 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 срабатывает событие, поэтому использовать тайм-аут.