javascript - 怎么使用正则表达式完美匹配HTML标签(仅标签)?
大家讲道理
大家讲道理 2017-04-11 12:53:00
[JavaScript讨论组]

需要匹配以下字符串,要求去掉html标签,只剩下“数量"number"”。

< i class="help" data-content="数量(a>b>c>d)">数量"number" < / br >

我已经写了一个

/<\s*\/?\s*[a-zA-z_]([^>]*?["][^"]*["])*[^>"]*>/g

有没有更完美的匹配方案呢?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(7)
PHP中文网

完美解决啦!转自腾讯前端博客:http://imweb.io/topic/56e804e...


匹配HTML标签嘛,感觉很简单的样子,我们的第一反应可能是:var pattern = /<[^>]+>/ 不过这样匹配可能存在的问题是:如果tag中含有>,上面的正则就不能正常匹配了。如: <input name=123 value=">" >

虽然上面这种HTML的写法很少(sha)见(bi),但确实合法的。因此,简单的<[^>]+>就不能用了,需要想个聪明点的办法。 我们先来看一下HTML Tag中有什么规则:<...>中能够出现
引用文本(被单引号或双引号包裹的)
非引用形式的“其他文本”(包括除了>和引号之外的任何字符)

引用文本:HTML中的引文可以用双引号,也可以用单引号,但不允许嵌套转义的引号。

因此我们可以使用/("[^"]*"|'[^']*')/来匹配。

其他文本:除了>和引号之外的任意字符

可以使用/[^'">]/来匹配 现在可以得出匹配HTML Tag的正则表达式最终版!

var pattern = /<("[^"]*"|'[^']*'|[^'">])*>/

给这个正则表达式来点注释:

<                # 开始的尖括号"<"
    (            #     任意数量的...
        "[^"]*"  #         双引号字符串
        |        #         或者是...
        '[^']*'  #         单引号字符串
        |        #         或者是...
        [^'">]   #         "其他文本"
    )*           #         
>                # 结束的尖括号">"

需要注意的是,我们不用"+"来修饰[^'">]的原因是([^'">]+)*可能会带来灾难性的后果。匹配次数呈指数级增长。比如:对于简单的目标字符串helloworld,是星号会迭代10次,每一次迭代中[^'">]+匹配一个字符?还是星号迭代3次,内部的[^'">]+分别匹配5、2、3个字符?或者2、3、1、4个字符?还是其他情况?这样会把正则引擎搞疯掉的啦!

阿神

看了下回答,都不完美吧,html标签内可以有<>这两个字符,其次还有双引号单引号规则,具体搜一下腾讯前端博客关于正则一文,手机码字不方便写代码。

天蓬老师

提供个歪思路:仅限浏览器环境,node就算了,倒腾正则太费劲

var p = document.createElement('p');
p.innerHTML = '<i class="help" data-content="数量(a>b>c>d)" style="cursor: pointer;">数量"number"</i> </br>';
console.log(p.innerText);
ringa_lee

/<.+?>/g试试

PHP中文网
/">([^<]+)/g
阿神
(new RegExp('<\\s*(\\w+).*>(.+)</\\s*\\1\\s*>','ig')).exec('< i class="help" data-content="数量(a>b>c>d)" style="cursor: pointer;">数量"number"</ i  > < / br >')[2]
阿神

个人觉得可以试试这种方案:即不用正则表达式,把这段html代码append到页面中,页面会生成DOM结构,然后获取这些DOM结构的tagName,即可得到纯净的标签

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号