Question

有时我需要将旧的HTML结构“转换”为新的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的副本。

BTW，不久前我正在寻找一个自动执行此类操作的编辑器/工具，但似乎没有这样的事情：https://softwareengineering.stackexchange.com/questions/79615/html-text-editor-with-dom-manipulation

Answer 2

听起来你想要操纵HTML的结构（你似乎同情“DOM”），而不是文本。而你想这样做是因为通过将HTML规范化为类似DOM的结构，你可以摆脱文本布局，有趣的情况下拼写的HTML标签，属性的存在/缺失等问题。

Probabaly并不像你想的那么方便，但是source-to-source program transformation system可能会有所帮助。

这样的工具解析语言文本（在您的情况下，HTML）并构建AST，即数据结构有点像DOM，它捕获代码的确切结构，例如标签，它们的嵌套以及附加的属性和文本。一旦你拥有了AST，你就可以使用你知道并喜欢的HTML表面语法将变换应用于AST（？）。转型对结构进行操作，而不是文本，因此您不会遇到文本问题。在转换后，您可以从修订后的AST中重新生成语言（HTML）文本。

我们的DMS Software Reengineering Toolkit是这些工具之一。您可以将上面所需的更改写为转换：

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>";

这个重写规则有三个部分：一个包含规则名称的标题和一个参数声明，它们指示将在规则体中绑定哪种占位符，一个左侧匹配模式（在引号内部））和右侧替换模式（在 - ＆gt;之后）也在引号内。引号不是HTML引号;规则重写语法“metaquotes”将HTML语法与转换规则语法分开。

这种情况下的参数用于表示两个文本字符串t1和t1;他们被发现将模式称为\ t1和\ t2，其中\是重写规则metaescape，因为这些参数名称不是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命令来完成它。比编写脚本或找出正则表达式更简单。

重构现有HTML文件

3 个答案: