HTML+CSS+JavaScript

Пишу визуальный редактор, встав вопрос об удалении вордовского мусора из текста. Делать это надо средствами js. Вот что я накатал и думал что этого будет довольно...:

pasteCache = pasteCache.replace(/<strong(\s+|>)/g, "<b>"); // Замена всех элементов strong на на b         pasteCache = pasteCache.replace(/<\/strong(\s+|>)/g, "</b>");  pasteCache = pasteCache.replace(/<em(\s+|>)/g, "<i>"); // Замена всех элементов em на на i     pasteCache = pasteCache.replace(/<\/em(\s+|>)/g, "</i>"); pasteCache = pasteCache.replace(/<[^>]*>/g, function(match)    {     match = match.replace(/ ([^=]+)="[^"]*"/g, function(match2, attributeName)    {         if (attributeName == "alt" ||  attributeName == "href" ||  attributeName == "src" ||  attributeName == "title" ||  attributeName == "width" ||  attributeName == "height" ||  attributeName == "cellpadding" ||  attributeName == "cellspacing"){                 return match2;         }         return "";     });     return match; }); pasteCache = pasteCache.replace(/<\?xml[^>]*>/g, ""); pasteCache = pasteCache.replace(/<[^ >]+:[^>]*>/g, ""); pasteCache = pasteCache.replace(/<\/[^ >]+:[^>]*>/g, "");

Но прекрасно работает в Chrome.
Но возник вопрос с оперой и ФФ.
Первая вставляет текст вообще без форматирования. Как бороться?
Второй оставляет кучу г*вна после оботки ( в том числе мета теги, стили и тд).

Что делать?
Использовать сторонние редакторы не предлагать :)

В IE не пашет, но, по всей видимости, по причине того, что теги там вставляются в верхнем регистре, т.е надо все теги делать например в нижнем.

UPD: Также после чистки остаются пустые спайны (т.е они не пустые, внутри текст, но без атрибутов => не нужны).
Почему-то код:

pasteCache = pasteCache.replace(/<span>/g, "");  pasteCache = pasteCache.replace(/<\/span>/g, "");

не пашет... о_О

1. У вас ошибка - символы < и > используются в регулярных выражениях как специальные,
потому вам их надо экранировать обратным флешем.

2. Кроме того, ваше регулярное выражение можно улучшить, добавив модификатор i - чтобы
удалялись <SPAN>'ы, написанные любым регистром (и <SPAN>, и <span>, и <sPaN>).

3. Ну и, наконец, для удаления начальных и конечных тегов <SPAN> вполне достаточно
одного регулярного выражения вместо ваших двух. Для этого нужно использовать
квантификатор ?, означающий "ноль совпадений или одно совпадение".

Окончательно вместо двух ваших строк можно записать одну:

pasteCache = pasteCache.replace (/\<\/?span\>/ig, "");

Перечисленное в пп.1-2 вам надо применить и при замене тегов <STRONG> и <EM>.

Спасибо, работает, элегантно, без карманов)
А как быть с оперой, фоксом и ie?

Вот код скрипта, который отвечает за чистку кода:

cleanPaste : function(textarea_id) {         var iframe = dID("wysiwyg_"+textarea_id);         if(confirm("Убрать из вставленного текста лишние элементы?")) {             var pasteCache = iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML;                          /* Заменяем теги */             pasteCache = pasteCache.replace(/<strong(\s+|>)/ig, "<b>"); // Замена всех элементов strong на на b                     pasteCache = pasteCache.replace(/<\/strong(\s+|>)/ig, "</b>");              pasteCache = pasteCache.replace(/<em(\s+|>)/ig, "<i>"); // Замена всех элементов em на на i                 pasteCache = pasteCache.replace(/<\/em(\s+|>)/ig, "</i>");             pasteCache = pasteCache.replace (/\<\/?span\>/ig, ""); // Удалем спайны             pasteCache = pasteCache.replace(/<[^>]*>/ig, function(match)    {                 match = match.replace(/ ([^=]+)="[^"]*"/g, function(match2, attributeName)    {                     alert(attributeName);                     if (attributeName == "alt" ||  attributeName == "href" ||  attributeName == "src" ||  attributeName == "title" ||  attributeName == "width" ||  attributeName == "height" ||  attributeName == "cellpadding" ||  attributeName == "cellspacing"){                         return match2;                     }                     return "";                 });                 return match;             });             pasteCache = pasteCache.replace(/<\?xml[^>]*>/ig, "");             pasteCache = pasteCache.replace(/<[^ >]+:[^>]*>/ig, "");             pasteCache = pasteCache.replace(/<\/[^ >]+:[^>]*>/ig, "");             iframe.contentWindow.document.getElementsByTagName("body")[0].innerHTML = pasteCache;         }     }

Он вызывается событиями, которые я вставляю в iframe:

if(!this.isIE) iframeDoc.addEventListener("keydown", function(e){wysiwyg.detectPaste(e,textarea_id); return true;}, false); // Событие по нажатию кнопки (для чистки вставленого)         else iframeDoc.attachEvent("onkeydown", function(e){wysiwyg.detectPaste(e,textarea_id); return true;}, false);

isIE задается так:

this.isIE = /*@cc_on!@*/false;

Управление передается скрипту, который запускает cleanPaste через таймаут 100мс (чтобы текст успел вставиться) если был нажат контрол и клавиша 86 (v).

Во всех браузерах событие выполняется и до cleanPaste дело доходит, но, как я уже писал, в опере текста вставляется вообще без форматирования, в ие код чистится частично (удаляются стили и классы у элементов B и тд, но остаются у p и font. В ФФ вставляется вообще куча кода, который, опять же, частично чистится, но не до конца. В хроме все (и в сафари, наверное, тоже) все ок.
Что я недоглядел, почему в ИЕ не полностью чистися код, баг ли моего конкретно висивига - отсутствие форматироание в тексте в опере и как бороться с фоксом.

Заранее спасибо!

Что-то не очень у вас с логикой и внимательностью :-)

1. Даёте код функции под именем cleanPaste
И тут же показываете вызов функции под именем detectPaste (???)
Нет, я, конечно же, понял, что cleanPaste как-то вызывается из detectPaste...
но мог бы и не догадаться :-)

2. Мою самую последнюю рекомендацию (распространить пункты 1 и 2 при замене
<STRONG> и <EM>) вы восприняли почему-то ЧАСТИЧНО.
Пункт 2 (по поводу модификатора i) вы учли.
А вот насчет того, что символы < и > надо экранировать обратным слешем, вы ЗАБЫЛИ.

Порекомендую сначала отработать только ОЧИСТКУ, в потом уж заняться подключением
функций и прочими проблемами.
Поэтому пока ограничусь замечаниями по замене <STRONG> и <EM>.
Заменяете вы с ОШИБКОЙ.
В тех случаях, когда надо менять "чистый" тег (безо всяких атрибутов), то записанное
у вас работает ПРАВИЛЬНО.
А вот когда в тегах имеется какой-либо атрибут, то у вас на выходе - ерунда.

Из <strong style="color: red"> у вас получается    <b>style="color: red"> а должно получиться <b style="color: red">

Заметили разницу?

Вполне достаточным поэтому будет заменять только <STRONG на <B и <EM на <I - без
учёта последующих возможного пробела или символа >.
Для тега <EM надо будет учесть, что это может быть частью тега <EMBED>, поэтому надо
"заглянуть вперёд" и сказать браузеру, что замену проводить только если далее
не будет символа b (в коде я это "заглядывание" выделил жирно).

В общем, четыре ваших строчки после комментария /* Заменяем теги */ замените на две:

pasteCache = pasteCache.replace (/\<strong/ig, '<b').replace (/\<\/strong\>/ig, '</b>'); pasteCache = pasteCache.replace (/\<em(?!b)/ig, '<i').replace (/\<\/em\>/ig, '</i>');

Ну и объясните на пальцах (простыми словами) что именно вы хотите делать следующей
вашей строкой (коя после удаления <SPAN>'ов и со встроенной функцией)?

Следующая регулярка находит все атрибуты ([^=]+)="[^"]*" , кладет сам атрибут в переменную attributeName. Далее идет условие, если это не атрибут из условия , то заменяем на пустую строку, иначе - на сам атрибут.
Т.е регулярка вычищает атрибуты style, class и другие, которые во множестве вставляет ворд.

Смотрите http://novikov.ua/cleaner/

Хм... чесно говоря я не понял на каком языке это написано... в IE 8, даже в режиме совместимости, у меня это не работает, в остальных браузерах тоже.