使用Regex以代码格式分隔innerHTML元素

时间:2020-01-08 04:31:42

标签: javascript regex

我的innerHTML的结果类似于下面的javascript。

"<ol><li>Testing1</li><li>Testing2</li></ol>"

我可以使用正则表达式或其他格式将其对齐为以下代码格式吗?有什么建议吗?

<ol>
  <li>Testing1</li>
  <li>Testing2</li>
</ol>

1 个答案:

答案 0 :(得分:3)

问题isn't trivial。正则表达式的一个问题是,在大多数情况下,Javascript无法处理嵌套的匹配定界符。另一个问题是,您需要跟踪自动关闭标签(<div class="box box-primary"> <div class="box-body"> <div class="row"> <div class="col-md-6"> <dl class="dl-horizontal"> <dt>Nama Produk</dt> <dd> {{ ucfirst($product ?? '') }}</dd> <dt>Harga Produk</dt> <dd> {{ "Rp. ". number_format($product ?? '',0,'.','.') }}</dd> <dt>Stok Produk</dt> <dd> <label for="" class="text text-primary"> {{ $product ?? ''->stock }} </label></dd> {{-- <dt>Description</dt> <dd style="word-break: break-all;"> {{ str_limit($product ?? ''->description,500,' ...') }}</dd> --}} </dl> </div> </div>或没有关闭标签的标签(<div /><img>以编程方式确定您当前正在处理的文本是结构化HTML标记的一部分,还是纯文本(例如<input>)。

使用为此目的而设计的库可能会更容易,以免重新发明轮子。 js-beautify是一种选择:

<textarea>foo<div>bar</div></textarea>
const input = "<ol><li>Testing1</li><li>Testing2</li></ol>";
console.log(html_beautify(input, { 'indent-size': 2 }));