js 使用正则获取 html中 所有span标签

博客涉及前端领域,重点围绕HTML和JavaScript展开,这两种技术是前端开发的重要组成部分,在网页构建等方面发挥着关键作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

let html = `<p>艾迪莎测试但大家还是</p>
            <h1>你好啊</h1>
            <p>啊是多久啊合适的
                <span style="text-decoration: underline;">静安寺</span>
                大家哈圣诞节
                <span style="text-decoration: underline;">哈桑</span>
                大家爱神
            </p>
            <p>的箭哈啥
                <span style="color: #FF0000;">圣诞节</span>
                阿加莎说的话就是
                <span style="color: #FF0000;">暗杀计划</span>
                啊发哈就是<br/>
            </p>`
let arraySpan = html.match(/<span[^>]style="text-decoration: underline;">([\s\S]*?)<\/span>/g);
let arraySpan2 = html.match(/<span[^>]style="color: #FF0000;">([\s\S]*?)<\/span>/g);
console.log('arraySpan-=-=-=-=>',arraySpan)
console.log('arraySpan2-=-=-=-=>',arraySpan2)
可以使用正则表达式结合 JavaScript 的 replace() 方法来实现。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>Replace Text in HTML Tag</title> </head> <body> <div> <p>Hello, <span class="name">John</span>!</p> <p>Welcome to our website!</p> </div> <script> var html = document.documentElement.innerHTML; var regex = /<span class="name">([^<]+)<\/span>/g; var replacedHtml = html.replace(regex, "$1 Doe"); document.documentElement.innerHTML = replacedHtml; </script> </body> </html> ``` 上述代码会将 HTML 中所有带有 class 属性为 "name" 的 span 标签内的文本替换为 "Doe"。具体实现过程如下: 1. 使用 document.documentElement.innerHTML 获取整个 HTML 页面的文本。 2. 定义一个正则表达式,用于匹配带有 class 属性为 "name" 的 span 标签内的文本。这里使用了捕获组来获取标签内的文本内容。 3. 使用 replace() 方法进行替换。第一个参数是要匹配正则表达式,第二个参数是要替换成的文本。这里使用了 "$1" 占位符来表示捕获组中的文本内容。 4. 将替换后的 HTML 重新赋值给 document.documentElement.innerHTML,即可实现替换效果。 需要注意的是,在使用正则表达式匹配 HTML 标签时,应该使用非贪婪模式,即在正则表达式后面加上 "?",以避免匹配到多个标签的情况。例如上述代码中的正则表达式为 /<span class="name">([^<]+)<\/span>/g,其中的 "[^<]+" 就是一个非贪婪模式的表达式,表示匹配除了 "<" 外的任意字符。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值