Пытаюсь на Джаваскрипте обработать хтмл контент, скопированный со стороннего сайта и вставляемый с буфера обмена в элементы моей страницы, которые имеют contenteditable="true"
var allEditableWrappers = document.querySelectorAll('*[contenteditable="true"]');
for(var i = 0; i < allEditableWrappers.length; i++) {
allEditableWrappers[i].addEventListener('paste', function(e){
e.preventDefault();
var pastedContent = e.clipboardData.getData('text/html');
var pastedContent = pastedContent.replace(/<!--StartFragment-->/g, '');
var pastedContent = pastedContent.replace(/<!--EndFragment-->/g, '');
var pastedContent = pastedContent.replace(/style="[^"]*"/g, '');
var pastedContent = pastedContent.replace(/class="[^"]*"/g, '');
var pastedContent = pastedContent.replace(/id="[^"]*"/g, '');
var pastedContent = pastedContent.replace(/data-(.*?)="[^"]*"/g, '');
var pastedContent = pastedContent.replace(/<div.*?>/si, '');
var pastedContent = pastedContent.replace(/<\/div>/si, '');
if(pastedContent.indexOf('<p>') === -1) {
var pastedContent = '<p>'+pastedContent+'</p>';
}
var pastedContent = pastedContent.replace(/®/g, '®');
this.innerHTML = pastedContent;
});
}
Первая проблема в том что бывает на сайте-доноре выделяю и копирую только один абзац и теги абзаца не копируются в clipboard, только текст. В таком случае при вставке нужно добавить обвертку <p>
и </p>
. Как видно по коду, пытаюсь это сделать через:
if(pastedContent.indexOf('<p>') === -1) {
var pastedContent = '<p>'+pastedContent+'</p>';
}
Но данная "обвертка" во-первых кроме тегов <p>
и </p>
почему то добавляет и пустые строки, которые не нужны, и текст разбивается на части, обвернутые в span'ы. А во-вторых если на сайте-доноре выделить несколько разных блоков и при этом теги абзацов копируются в clipboard, то "обвертка", которая в принципе не должна в таком случае добавляться, почему то вставляет пустые абзацы в начале и в конце вставляемого контента.
И вторая проблема в том что не могу заменить специальные символы. Например строка
var pastedContent = pastedContent.replace(/®/g, '®');
почему то не заменяет ®
на ®
. Хотя перед самой вставкой console.log()
отображает ®
как и нужно. Такое впечатление что Хром возвращает назад ®
в момент когда вставляю контент в элемент с contenteditable="true"
или причина другая, не знаю...
Тестирую копируя инфо со страницы www.promat.ru/ru-ru/products/accessories/promaseal-lfc
Например копирую только абзац под фото "Материал PROMASEAL®-LFC содержит...". При вставке получаю текст со своей "обверткой", но с пустыми строками и разбитый спанами. Потом например копирую начиная от этого абзаца и заканчивая всей таблицой снизу. Получаю при вставке пустые абзацы вначале и вконце.
ps. Читал о том что regex для парсинга хтмл не самый лучший вариант, но все же интересует решение вышеописанных проблем с тем что есть