跪求 嵌套的正则表达式

eyunfei 2007-09-20 04:44:56
最近在开发一个CSS编辑工具时碰到一个问题，就是如何在现有网页上查找使用指定的CSS样式元素，~如：
CSS: #siteDataCount .cs{}
HTML片断:
<div id="siteDataCount">
<div></div>
<div>
<span class="cs"></span>
</div>
</div>
<div><span class="cs"></span></div>

需要找到 siteDataCount里的 <span class="cs"></span>
不知用正则表达式如何匹配嵌套在 siteDataCount 里面的 样式~~
或者是否用DOM规则来实现找比较方便？
...全文
357 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
eyunfei 2007-10-04
  • 打赏
  • 举报
 回复
谢谢大家,用DOM解决~~
mingxuan3000 2007-09-21
  • 打赏
  • 举报
 回复
先document.getElementById("siteDataCount")

然后对他的childNodes进行上面的循环判断
mingxuan3000 2007-09-21
  • 打赏
  • 举报
 回复
用dom吧
<html>
<head>
</head>
<body>
<div id="siteDataCount">
<div></div>
<div>
<span class="cs">123</span>
</div>
</div>
<div><span class="cs">456</span></div>
<script language="JavaScript">
alert('')
//alert(document.getElementById("siteDataCount").innerHTML.toString().match(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/g)[0])

var bb=document.getElementsByTagName("span")
alert('')
for(var i=0;i<bb.length;i++){
//alert('')
alert(bb[i].className)
}
</script>

</body>
</html>

正则不好匹配
eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
匹配以后给这个元素加上一个亮色的显示边框，以提示用户这个CSS在哪几个地方用到~~~
匹配后可能的样式为：
<div id="siteDataCount">
<div></div>
<div>
<span class="cs" style="加上边框"></span>
</div>
</div>
<div><span class="cs"></span></div>
eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
使用DOC也考虑过，只是觉得当遇到大量需要查找的CSS样式时，函数递归可能会耗费大量的计算时间~~ 算法上也比较复杂，所以想试着用正则来解决一下这个问题~~~
jhafang 2007-09-21
  • 打赏
  • 举报
 回复
匹配了以后要做什么?
mingxuan3000 2007-09-21
  • 打赏
  • 举报
 回复
先document.getElementById("siteDataCount").innerHTML.toString()
再对上面的正则
Gdj 2007-09-21
  • 打赏
  • 举报
 回复
用正则的嵌套表达式我写过了。在别的软件里使用正常。但在ie下嵌套超过3层就很容易引起ie崩溃。还是算了吧。既然是web，还是用dom方便
eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
相对来说正则最难的地方就是要正确找到 标签的嵌套匹配，这个解决了，我想应该就比较容易了~~ 在最后一层里可以忽略掉他里面的内容，
如：
<span class="cs"><div>123</div><span> 123</span></span>
正则：<span class="cs">(.|\n)*
只要确认这个标签是在 siteDataCount 下我就可以实行替换了，<span class="cs" style="边框样式">
eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
使用DOM好像就只能用递归实现吧... 因为是要知道在一个页面上有哪几个地方用到过一个CSS，需要遍历Document文档的所有结点，需找到多个CSS，可能的一种情况如下：

CSS:
#siteDataCount .cs,
div#Temp1 ul li.cur em,
table.desc .module span
{}

而class也可能有多个CSS，<span class="c2 cs s1"></span>，通常大型网站的网页都比较大，解析一组CSS可能耗费的时间比较长~~


eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
看错了，主要是因为 siteDataCount 这个是不确定的，这只是他其中的一种方式，
有可能是 .siteDataCount .cs，那这时就不能用 getElementById了，<div class='siteDataCount'><span class="cs"></span></div><span class='cs'></span>

如果碰到是单一的没有嵌套的标签到是可以这样写正则:
<div class='siteDataCount'><[^>]*? class=\'cs\'>(.|\n)*?<\/span></div>

，可如果里面有嵌套的标签的话，如<div class='siteDataCount'><div></div><span class="cs"></span></div>，就不能正确匹配到了~
eyunfei 2007-09-21
  • 打赏
  • 举报
 回复
不行的，实际上有这种情况：
<div id="siteDataCount"><span class="cs">ATEXT</span><div></div><div>
<span class="cs">BTEXT</span><div></div>
那上面那种解析就不是只限定在siteDataCount 里的cs了,外面那层BTEXT的也被包函进去了~~
mingxuan3000 2007-09-21
  • 打赏
  • 举报
 回复
正则太复杂了
下面这样也不行
document.getElementById("siteDataCount").innerHTML.toString().match(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/g)[0]

class="cs"里面可能有如下的情况,太复杂了
<span class="cs"><div>123</div><span> 123</span></span>
chaircat 2007-09-20
  • 打赏
  • 举报
 回复
不过作为大脑体操, 思考下如果HTML格式良好该怎么用正则匹配倒是不错...
想ing...
chaircat 2007-09-20
  • 打赏
  • 举报
 回复
如果HTML标记都是匹配的的还好办...
要是有不匹配的就糟了...
我觉得那样就不可能用正则来匹配了...
所以如果你想要它能对付这种情况你还是想想怎样用上DOM吧...
eyunfei 2007-09-20
  • 打赏
  • 举报
 回复
这个正则现在最麻烦的就是 循环嵌套的问题，在网上查了下资料，一直没找到好的解决方法~~
实际上CSS定义可能比这个还复杂，如 #siteDataCount span.cs{}等，
mingxuan3000(铭轩) 的方法只能得出带有 class="cs" 的HTML元素，而没有限定是在 元素siteDataCount 里的标签~~ 不过也挺感谢的~~
xingqiliudehuanghun 2007-09-20
  • 打赏
  • 举报
 回复
mark
mingxuan3000 2007-09-20
  • 打赏
  • 举报
 回复
刚才没仔细看 上面的有问题
mingxuan3000 2007-09-20
  • 打赏
  • 举报
 回复
<html>
<head>
</head>
<body>
<script language="JavaScript">
var a='<div id="siteDataCount"><div></div><div><span class="cs">123</span></div></div><div><span class="cs">456</span></div>'
alert('')
alert(a.match(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/g).length)
alert(a.match(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/g)[0])
alert(a.match(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/g)[1])
//alert(/<[^>]*? class=\"cs\">[^<]*?<\/[^>]*?>/.match(a))
</script>

</body>
</html>
MySQL 查询与高级查询（多表、嵌套和正则表达式）
Re： MySQL 查询与高级查询（多表、嵌套和正则表达式） （查询的能力，显示DBA的功力）============================================= 数据库管理系统的个最重要的功能就是数据查询，数据查询不应只是简单查询数据库中存储的数据，还应该根据需要对数据进行筛选，以及确定数据以什么样的格式显示。 MySQL提供了功能强大、灵活的语句来实现这些操作，本章将介绍如何使用 SELECT 语句查询数据表中的一列或多列数据、使用集合函数显示查询结果、连接查询、子查询以及使用正则表达式进行查询等。------------------------------------  
python3最新爬取王者荣耀英雄的图片
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
BUAA_OO第一单元总结性博客作业——表达式求导
一、程序设计思路　　 　　在我的三次作业中都采用了类的分层结构，采用逐项匹配，分层求导的思路。 　　（一）、 　　第一次作业中构建了Polynimial（多项式）类，在类的构造器中就完成了对非法空格的判断并对合法表达式进行删除空格处理。由于第一次作业仅含有带有系数的幂函数与常数项，因而我就没有专门构建针对每一个项的类，而是在本类中就定义了getitem方法，用正则表达式逐项匹配出符...
py爬虫自学入门__6(BeautifulSoup库)
# 一、 定义：灵活又方便的网页解析库，处理高效，支持多种解析器。利用它不用编写正则表达式即可方便的实现网页信息 # 的提取 # BeautifulSoup支持的解析库：https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html（官方文档） # 二、 基本使用 ...
小白跪求要看的Scala 看不看思密达
Scala是一门多范式的编程语言，一种类似Java的编程语言 ，设计初衷是实现可伸缩的语言 、并集成面向对象编程和函数式编程的各种特性。目前最主流的大数据开发框架Spark的实现就是通过Scala去实现的。Scala可以与Java互操作。它用scalac这个编译器把源文件编译成Java的class文件（即在JVM上运行的字节码），也可以从Scala中调用所有的Java类库，也同样可以从Java应用程序中调用Scala的代码。
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章