Как определить инлайн стиль и заменить на соответствующие теги?

Question

[Владимир]

Здравствуйте!

В кастомный WYSIWYG редактор копируют текст из MS Word и вместе с текстом, понятное, дело приходят и теги со стилями.
Если вообще очищать весь текст от всего не нужного - проблем нет, но задача в том, чтобы определять жирный текст, курсив и т.д. и менять на нужные теги.

Вот пример что приходит:

<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:13.999999999999998pt;font-family:Calibri,sans-serif;color:#000000;background-color:#ffffff;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">
   Тут текст
</span>
</p>

соответственно нужно в теге в style понять, что font-style: italic и заменить span на strong, при этом удалить все инлайновые стили, то есть на выходе нужно получить:

<p>
   <strong>Тут текст</strong>
</p>

Или еще один пример:

<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:18pt;font-family:Calibri,sans-serif;color:#000000;background-color:#ffffff;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">
   Тут текст
</span>
</p>

Тут нужно определить что у font-size значение 18 и тогда span, заменить на h2, то есть получить следующее:

<p>
   <h2>Тут текст</h2>
</p>

Буду ооочень благодарен за помощь.

Comments

[Aetae]

А ты не используй кастомный - ты используй готовую либу с давней историей поддержки. Во всех взрослых редакторах уже давно это делать умеют, позакрыв миллион багов. Со своим велосипедом ты ещё намучаешься.

Answer 1

[mr Anderson]

Вот тебе что-то на подобие парсера на js, который обрабатывает входной HTML-код (span, p) на целевые теги (strong, h2, и т.д.)

function processHtml(inputHtml) {
  // Создаешь временный DOM для парсинга HTML
  
  const parser = new DOMParser();
  const doc = parser.parseFromString(inputHtml, 'text/html');

  // Обрабатываешь span внутри p
  doc.querySelectorAll('p span[style]').forEach((span) => {
    const style = span.getAttribute('style');
    const fontSizeMatch = style.match(/font-size:\s*([\d.]+)pt/);
    const fontWeightMatch = style.match(/font-weight:\s*(\d+)/);
  // дописать остальные регулярки (font-style и т.д.)

    let newElement;

    if (fontSizeMatch) {
      const fontSize = parseFloat(fontSizeMatch[1]);
      
      if (fontSize >= 18) {
        newElement = document.createElement('h2');
      } else if (fontSize >= 16) {
        newElement = document.createElement('h3');
      }
    }

    if (!newElement && fontWeightMatch) {
      const fontWeight = parseInt(fontWeightMatch[1], 10);
   
      if (fontWeight >= 700) {
        newElement = document.createElement('strong');
      }
    }

    // Если замена нашлась, то создаешь новый элемент
    if (newElement) {
      newElement.textContent = span.textContent;
      span.replaceWith(newElement);
    }
  });

  // Удаляешь лишние стили из p

  doc.querySelectorAll('p').forEach((p) => {
    p.removeAttribute('style');
  });

   return doc.body.innerHTML; // возвращаешь обработанный html
}


const inputHtml = `
<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:18pt;font-family:Calibri,sans-serif;color:#000000;background-color:#ffffff;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">
   Тут текст
</span>
</p>`;

const resultHtml = processHtml(inputHtml);
console.log(resultHtml);

Соответственно, если будут дополнительные условия, код можно легко расширить
https://jsfiddle.net/dfhw4eo6/

Comments

[Aetae]

Если уж используешь DOMParser то логично использовать и .style.getPropertyValue(), а не вручную ковырять атрибут.