Не могу regex'ом на Javascript'e удалить внутренний style

223
15 марта 2018, 11:50

При копировании текста с Вордовского документа и последующей вставке в html-элемент с contenteditable="true" получаю внутренний стиль вида:

    <style type="text/css">
    <!--
        @page { size: 8.5in 11in; margin: 0.79in }
        P { margin-bottom: 0.08in }
    -->
    </style>

*Именно с табуляцией перед ним

Пытаюсь полностью удалить его на JavaScript'e replace'ом

...
var thisHTML = thisHTML.replace(/\<style type=\"text\/css\"\>(\n?)(\t?)(.*?)(\t?)\<\/style\>/g, '');
...

но стиль не удаляется

Хотя отдельные части например <style type=\"text\/css\"\> удаляются нормально

Для тестирования достаточно набрать любой Вордовский текст

Answer 1

Используйте такой вариант удаления стилей. Ответ взят отсюда Remove HTML formatting from a String

// removes MS Office generated guff
function cleanHTML(input) {
  // 1. remove line breaks / Mso classes
  var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g; 
  var output = input.replace(stringStripper, ' ');
  // 2. strip Word generated HTML comments
  var commentSripper = new RegExp('<!--(.*?)-->','g');
  var output = output.replace(commentSripper, '');
  var tagStripper = new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font)(.*?)>','gi');
  // 3. remove tags leave content if any
  output = output.replace(tagStripper, '');
  // 4. Remove everything in between and including tags '<style(.)style(.)>'
  var badTags = ['style', 'script','applet','embed','noframes','noscript'];
  for (var i=0; i< badTags.length; i++) {
    tagStripper = new RegExp('<'+badTags[i]+'.*?'+badTags[i]+'(.*?)>', 'gi');
    output = output.replace(tagStripper, '');
  }
  // 5. remove attributes ' style="..."'
  var badAttributes = ['style', 'start'];
  for (var i=0; i< badAttributes.length; i++) {
    var attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"','gi');
    output = output.replace(attributeStripper, '');
  }
  return output;
}
Answer 2

Заменяй такое:

/<style[^>]*>[\s\S]*?<\/style>/g

Проверка:

var s = ` 
  <section> 
    <style type="text/css"> 
    <!-- 
        @page { size: 8.5in 11in; margin: 0.79in } 
        P { margin-bottom: 0.08in } 
    --> 
    </style> 
  </section> 
  <div> 
    <style type="text/css"> 
    <!-- 
        @page { size: 8.5in 11in; margin: 0.79in } 
        P { margin-bottom: 0.08in } 
    --> 
    </style> 
  </div> 
` 
 
console.log(s.replace(/<style[^>]*>[\s\S]*?<\/style>/g, ""))

Answer 3

@Mykola Veriga, тот ответ, который вы опубликували первым, но потом удалили, хотя и не подходил, поскольку стилей много и они внутри кода, но он был как раз ближе к вопросу, поскольку мне нужно лишь удалить стили, остальной вордовский хлам я удаляю по своему.

Итак, благодаря вашей подсказке нашел такое решение:

...
var temp = document.createElement('div');
temp.innerHTML = thisHTML;
var styles = temp.getElementsByTagName('style');
for(var i = 0; i < styles.length; i++) {
    styles[i].parentNode.removeChild(styles[i]);
}
var thisHTML = temp.innerHTML;
...
READ ALSO
pug &mdash; dynamic inclusion

pug — dynamic inclusion

Всем доброго времени суток!

187
Почему оператор delete не удаляет локальную переменную внутри функции?

Почему оператор delete не удаляет локальную переменную внутри функции?

Вопрос в следующем - почему x не удаляется, ведь оно является свойством arguments?

215
Vuex в Nuxt.js копирование

Vuex в Nuxt.js копирование

Получается так что Vuex в Nuxt общий для всех подключенных пользователейКак сделать так что бы каждому пользователю отдавалась копия, а не оригинальный...

208