Jquery-cкрипт для замены разорванных html-тегов

135
09 ноября 2019, 04:10

На странице есть несколько форм, куда вставляется размеченный html-тегами текст, но предварительно прошедший через google или яндекс переводчик. Переводчики разрывают некоторые теги и вместо исходного <span>fish text</span> они могут выдать < span> рыбный текст< / span>.

Конечно, такая верстка неадекватно отображается во фронтенде. Есть код, который меняет исходный текст на указанный $('body').html($('body').html().replace(/исходник/g, 'замена')). Как его расширить, чтобы учитывались все возможные варианты разрывов тегов и они заменялись на свои правильные аналоги? Чтобы можно было или в скрипте перебрать все варианты, дополнять его новыми, или может с помощью регулярных выражений как-то можно все проще сделать?

Answer 1

Если проблема только в пробелах, которыми разбиваются теги (как Вы указали в примере), то это легко решить, с помощью несложного регулярного выражения.

Попробуйте запустить код и поменять текст в первом поле:

function fInput(oElem) { 
  oElem.nextElementSibling.value = oElem.value.replace(/<\s*(\/)?\s*(.*?\S)\s*>/gi, '<$1$2>'); 
}
textarea { display: block; height: 6em; width: 99%; }
<textarea oninput="fInput(this);"><span>fish text</span> они могут выдать  
<    span    > рыбный текст< /     span> могут выдать  
< div    > рыбный текст< /  div > могут выдать  
<   p class="foo"> рыбный текст< / p> 
< blockquote class="foo_60-90"> рыбный текст< /   blockquote></textarea><textarea></textarea>

READ ALSO
Как добавить placeholder и перенос строки в django форме?
HTML

Как добавить placeholder и перенос строки в django форме?

Как добавить planceholder и перенос строки в django форме? Потому что это: смотрится не красивоКод forms

 189
Смена аудио дорожки на иконку в мобильной версии
HTML

Смена аудио дорожки на иконку в мобильной версии

Есть аудиодорожка, мне нужно сменить всю дорожку только на одну иконку play/stop и чтобы аудио включалась по нажатию этой иконки, только в мобильной...

 121
Реализация живого поиска
HTML

Реализация живого поиска

есть список и форма ввода(код приложил ниже):

 113
Как сделать что-то похожее на книжку? [закрыт]
HTML

Как сделать что-то похожее на книжку? [закрыт]

Есть такая фигурка - Форма белого квадрата Подскажите как реализовать?

 121