在标签头后插入
我们有一个带有 HTML 文档的字符串。
编写一个正则表达式,在 <body>
标签之后立即插入 <h1>Hello</h1>
。标签可能具有特性(attribute)。
例如:
let
regexp =
/
你的正则表达式
/
;
let
str =
`
<html>
<body style="height: 200px">
...
</body>
</html>
`
;
str =
str.
replace
(
regexp,
`
<h1>Hello</h1>
`
)
;
之后,str
的值应该为:
<
html
>
<
body
style
=
"
height
:
200
px
"
>
<
h1
>
Hello</
h1
>
...
</
body
>
</
html
>
为了在 <body>
标签后面插入内容,我们必须先找到它。我们可以使用正则表达式 <body.*?>
来实现。
在本任务中,我们不需要修改 <body>
标签。我们只需要在它后面添加文本。
我们可以这样做:
let
str =
'...<body style="...">...'
;
str =
str.
replace
(
/
<body.*?>
/
,
'$&<h1>Hello</h1>'
)
;
alert
(
str)
;
// ...<body style="..."><h1>Hello</h1>...
在替换字符串中,$&
表示匹配本身,即源文本中与 <body.*?>
相对应的部分。它会被它自身加上 <h1>Hello</h1>
替换。
另一种方法是使用后瞻断言:
let
str =
'...<body style="...">...'
;
str =
str.
replace
(
/
(?<=<body.*?>)
/
,
`
<h1>Hello</h1>
`
)
;
alert
(
str)
;
// ...<body style="..."><h1>Hello</h1>...
正如你所看到的,这个正则表达式中只有后瞻断言部分。
它的工作原理如下:
- 在文本的每个位置。
- 检查它前面是否有
<body.*?>
。 - 如果有,就匹配该位置。
标签 <body.*?>
不会被作为结果返回。这个正则表达式的结果实际上是一个空字符串,但它只匹配前面紧挨着 <body.*?>
的位置。
因此,它将紧挨着 <body.*?>
的“空位置”替换为了 <h1>Hello</h1>
。这样就在 <body>
之后插入了内容。
P.S. 正则表达式中的修饰符,例如 s
和 i
也很有用:/<body.*?>/si
。这里修饰符 s
使得 .
可以匹配换行符,而修饰符 i
使 <body>
大小写不敏感,可以匹配 <BODY>
。