Реструктуризация существующих файлов HTML

Question

Были времена, когда мне нужно было "преобразовать" старую структуру HTML в новую. Чтобы проиллюстрировать, преобразование этого:

<!-- Old HTML structure. -->
<div class="class-a">
  <div class="class-b">
    <span>Hello</span>
  </div>
  <div class="class-c">
    <p>How are you doing?</p>
  </div>
</div>
<div class="class-a">
  <div class="class-b">    
  ... (and so on, basically repeats the construct above) ...

На что-то вроде:

<!-- New HTML structure. -->
<div class="class-aa">
  <span class="class-ab">Hello</span>
  <p>How are you doing?</p>
</div>
<div class="class-aa">
  <span class="class-ab">Hi!</span>
  ... (and so on, basically repeats the construct above) ...

Обратите внимание, что мне все еще нужен текст, но структура нуждается в полном пересмотре.

В худшем случае HTML-файл очень длинный и делает это вручную (да, много печатается). То, что я делал до сих пор, это либо использование простого регулярного выражения замены (если не слишком сложного), либо обращение к старой школе vi macro .

Кто-нибудь, пожалуйста, предложите лучший подход для достижения этой цели?

Answer 1

Вы можете написать JavaScript / jQuery, который выполняет реструктуризацию, а затем использовать инспектор DOM / отладчик браузера и получить копию измененного HTML.

Кстати, некоторое время назад я искал редактор / инструмент, который бы делал подобные вещи автоматически, но, похоже, такого не было: https://softwareengineering.stackexchange.com/questions/79615/html-text-editor-with-dom-manipulation

Answer 2

Звучит так, как будто вы хотите манипулировать структурой (вы, кажется, симпатизируете «DOM») HTML, а не текстом. И вы хотите сделать это, потому что, нормализуя HTML в DOM-подобную структуру, вы избавляетесь от проблем с разметкой текста, HTML-тегами, написанными в забавном случае, наличием / отсутствием атрибутов и т. Д.

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

Такой инструмент анализирует текст языка (в вашем случае, HTML) и создает AST, структуру данных в некоторой степени похож на DOM в том смысле, что он фиксирует точную структуру кода, например, теги, их вложение, а также прикрепленные атрибуты и текст. Если у вас есть владение AST, вы можете применить преобразования к AST, используя синтаксис поверхности HTML, который вы знаете и любите (?). Преобразования оперируйте структурой, а не текстом, чтобы не возникало проблем с текстом. После преобразования вы восстанавливаете текст языка (HTML) из исправленного AST.

Наш инструментарий реинжиниринга программного обеспечения DMS является одним из таких инструментов. Вы можете написать нужное вам изменение как преобразование:

domain HTML;

rule revise_div(t1: text, t2:text):div_tag->div_tag =
"<div class="class-a"> 
   <div class="class-b"> 
     <span>\t1</span> 
   </div> 
  <div class="class-c"> 
     <p>\t2</p> 
  </div> 
</div>"
    ->
"<div class="class-aa">   
    <span class="class-ab">\t1</span>   
      <p>\t2</p>   
 </div>";

Это правило перезаписи состоит из трех частей: заголовок, содержащий имя правила, и объявления параметров, которые указывают, какие виды заполнителей будут связаны в теле правила, шаблон сопоставления слева (внутри кавычек) ) и шаблон замены справа (после ->) также внутри кавычек. Кавычки не являются кавычками HTML; это синтаксис переписывания правил «мета-кавычки», отделяющий синтаксис HTML от синтаксиса правила преобразования.

Параметры в этом случае предназначены для представления двух текстовых строк t1 и t1; они встречаются в шаблонах как \ t1 и \ t2, при этом \ является метаэкратом правила перезаписи, поскольку эти имена параметров не являются частью HTML, а просто представляют текст, найденный там.

Механизм перезаписи, учитывая это правило, будет сопоставлять точку в AST (или все точки, в зависимости от того, как вы ее вызываете), привязывать t1 и t2 к соответствующим строкам, удалять соответствующее поддерево (HTML в шаблоне соответствия ), и замените его на шаблон правой стороны с подставленными замененными значениями t1 и t2.

Если ваш HTML действительно регулярно используется, это будет очень удобно. Вы можете кодировать эти правила и применять повторно ко многим файлам. Вы сможете написать ряд правил, которые охватывают варианты. Я немного волнуюсь, что много HTML написано случайным программистом на данный момент, и они не согласуются с тем, что они делают, и никакой фиксированный набор правил не решит вашу проблему.

Answer 3

Хм ... не могли бы вы просто сделать замену?

<div class="class-a">
  <div class="class-b">
    <span>

становится

<div class="class-aa">
  <span class="class-ab">

и

</span>
  </div>
  <div class="class-c">
    <p>

становится

</span>
  <p>

наконец,

</p>
  </div>
</div>

превращается в

</p>
</div>

Если ваш документ действительно повторяет одну и ту же структуру снова и снова, вы сможете сделать это с помощью этих трех команд find + replace. Проще, чем написать сценарий или определить регулярное выражение.