正则实例：多行html代码合并为一行

发表于 更新于 分类于 ， ， ， Waline： 本文字数： 4.4k 阅读时长 ≈ 4 分钟

有下面这样一段HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<span style="cursor:auto">
    Auto</span>
    <br />
<span style="cursor:crosshair">
    Crosshair</span>
<br />
<span style="cursor:default">
    Default</span>
<br />
<span style="cursor:pointer">
    Pointer</span>
<br />
<span style="cursor:move">
    Move</span>
<br />
<span style="cursor:e-resize">
    e-resize</span>
<br />
<span style="cursor:ne-resize">
    ne-resize</span>
<br />
<span style="cursor:nw-resize">
    nw-resize</span>
<br />
<span style="cursor:n-resize">
    n-resize</span>
<br />
<span style="cursor:se-resize">
    se-resize</span>
<br />
<span style="cursor:sw-resize">
    sw-resize</span>
<br />
<span style="cursor:s-resize">
    s-resize</span>
<br />
<span style="cursor:w-resize">
    w-resize</span>
<br />
<span style="cursor:text">
    text</span>
<br />
<span style="cursor:wait">
    wait</span>
<br />
<span style="cursor:help">
    help</span>

例如第一句：

1
2
3
<span style="cursor:auto">
    Auto</span>
    <br />

改成：

1
<span style="cursor:auto">Auto</span><br />

当然我是不可能一行行的来改的。使用正则表达式来做比较方便。匹配表达式：

1
(<span.*?>)\n\s+(.*</span>)\n\s+

匹配效果(VScode中)：

html代码，会被括号捕获到，而换行符和空白符就不会被捕获，使用捕获到的html代码替换掉原来匹配的文本即可。所以替换的正则表达式为：

1
$1$2

$1表示第一个捕获组，$2表示第二个捕获组。捕获组不同的软件(体系)中的表示方式不同。VScode中是使用$1,$2,… 而NotePad++中使用的是\1,\2,\3...。
使用上述正则表达式是进行替换即可。替换后的结果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">
    help</span>

当然最后一句，并没有能够成功匹配到。但这样的效果。还算满意,因为现在我只需要修改最后一行的效果。当然最佳的方式，应该是现在VScode中看匹配的结果。编写更好的正则表达式，尽可能匹配到所有的内容。完美的正则表达式为：

1
(<span.*?>)\n\s+(.*</span>)(:?\n\s+)?

这样所有的span标签都会被匹配到。替换后的效果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>