JavaScript正则表达式匹配包含换行的div和style标签
作者:青柠时间:2026-10-29 23:19:12浏览:326
本文介绍在JavaScript中使用正则表达式匹配包含换行符的style或div标签。通过[\s\s]替代.解决换行匹配失败问题,并演示如何执行单次或全局替换。同时解析g、i、m等正则标志的含义,帮助开发者准确处理HTML标签内容。
匹配包含换行的style或div标签
测试字符串:
<style>v\:* {
BEHAVIOR: url(#default#VML)
} o\:*
{
BEHAVIOR: url(#default#VML)
} w\:*
{
BEHAVIOR: url(#default#VML)
}
.shape
{
BEHAVIOR: url(#default#VML)
}
</style>
abcdefg
<style>
@font-face
{
font-family: Wingdings;
}
@font-face
{
font-family: Wingdings;
}
@font-face
{
font-family: Calibri;
} @font-face
{
font-family: Tahoma;
}
@page WordSection1
{size: 8.5in 11.0in; margin: 1.0in 1.0in 1.0in 1.0in;
} P.MsoNormal
{
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt;
FONT-FAMILY: "Times New Roman","serif"
} LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman","serif"
} DIV.MsoNormal
{
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman","serif"
}
H1
{
FONT-WEIGHT: bold; FONT-SIZE: 24pt; MARGIN-LEFT: 0in;
MARGIN-RIGHT: 0in;
FONT-FAMILY: "Times New Roman","serif";
mso-style-priority: 9;
mso-style-link: "Heading 1 Char"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
A:link
{
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
}
SPAN.MsoHyperlink
{
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
} A:visited
{
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
} SPAN.MsoHyperlinkFollowed
{
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
}
P
{
FONT-SIZE: 12pt; MARGIN-LEFT: 0in; MARGIN-RIGHT: 0in; FONT-FAMILY: "Times New Roman","serif";
mso-style-priority: 99; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
P.MsoAcetate
{
FONT-SIZE: 8pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Tahoma","sans-serif";
mso-style-priority: 99; mso-style-link: "Balloon Text Char"
}
LI.MsoAcetate
{
FONT-SIZE: 8pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Tahoma","sans-serif"; mso-style-priority: 99; mso-style-link: "Balloon Text Char"
} DIV.MsoAcetate
{
FONT-SIZE: 8pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Tahoma","sans-serif";
mso-style-priority: 99; mso-style-link: "Balloon Text Char"
}
SPAN.Heading1Char
{
FONT-WEIGHT: bold; mso-style-priority: 9; mso-style-link: "Heading 1"; mso-style-name: "Heading 1 Char"
}
SPAN.EmailStyle19 {
COLOR: #1f497d; FONT-FAMILY: "Arial","sans-serif"; mso-style-type: personal-reply
} SPAN.BalloonTextChar
{
FONT-FAMILY: "Tahoma","sans-serif"; mso-style-priority: 99; mso-style-link: "Balloon Text"; mso-style-name: "Balloon Text Char"
}
.MsoChpDefault {
FONT-SIZE: 10pt; mso-style-type: export-only
} DIV.WordSection1 {
page: WordSection1 } OL
{
MARGIN-BOTTOM: 0in } UL
{
MARGIN-BOTTOM: 0in
}
</style>
第一次尝试使用 <style[^>/]*>(.*?)</style> 时,发现无法匹配包含换行的内容。这是因为点号(.)默认只匹配除换行符(\n)以外的任意字符。
第二次尝试改用 <style(([\s\s])*?)</style>,成功实现了匹配。
若要匹配 <div> 标签,只需将上述正则中的 <style> 替换为 <div> 即可。
正则替换操作与全局标志说明
1. 仅替换匹配到的第一个 <style> 标签。
var result= testData.replace(<style(([\s\S])*?)<\/style>, '');
2. 会替换 testData 中所有的 <style> 标签。
var result= testData.replace(/<style(([\s\S])*?)<\/style>/g, '');
g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
以上内容是小编给大家介绍的JavaScript正则表达式匹配<div><style>标签,希望对大家有所帮助!
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
