使用js给列表批量添加标签.doc

做网页前端的人会遇到更新大量列表的时候，下面是一个音乐网站的节目菜单内容如下00:00-00:30 视网More00:30-01:30 45RPM01:30-02:30 视网More02:30-03:30 视网More03:30-04:00 13亿分贝04:00-05:00 酷乐LA05:00-06:00 视网More06:00-07:00 视网More07:00-08:00 勁爆點08:00-09:00 45RPM09:00-09:30 视网More09:30-10:00 DoubleShot10:00-10:30 视网More10:30-11:00 13亿分贝11:00-12:00 酷乐LA12:00-12:30 劲爆点12:30-13:00 视网More13:00-14:00 视网More14:00-15:00 酷乐LA15:00-15:30 DoubleShot15:30-16:00 视网More16:00-17:00 模范棒棒堂17:00-17:30 视网More17:30-18:30 视网More18:30-19:00 13亿分贝19:00-20:00 酷乐LA20:00-20:30 HitonV20:30-21:00 劲爆点21:00-22:00 视网More22:00-22:30 DoubleShot22:30-23:30 酷乐LA23:30-00:00 视网More如果要手动给这些节目单添加标签一定会让人很烦吧，下面介绍一种比较省力的方法。用UE文字编辑器（我用的版本UltraEdit 专业文本/十六进制编辑器版本 18.10.0.1010）建个html，把列表放在body里选中列表，点一下下面工具栏第5个的项目符号好了，标签全加好了，如下网页效果如下可是现在要给时间修改样式，要全加上标签，天哪，简直烦死人了，当然作为程序员，肯定会想偷懒，用js来加标签吧。这用到了正则表达式把所有的时间和节目内容时间：00:00-00:30 节目：视网More分别截取出来放在两个数组里在打印到网页上，好了大功告成。_,，本人写的代码如下电哥制作ullist-style-type:none;window.onload=function()var li=document.getElementsByTagName(li);var bbb=;/时间字段数组1var c=0;/计数用var ddd=;/时间字段数组2var str=;/保存li里面的内容for(var i=0;ili.length;i+)str+=lii.innerText;/保存li里面的内容var pattem=/ /ig;/用空格截取var pattem1=/d2:d2-d2:d2/;/时间var date=str.split(pattem);/把所有字段按空格分段截取,取得时间和节目字段var program=str.split(pattem1);/把所有字段按时间分段截取取得节目字段 for(var j=0;jdate.length;j+)/date是所有字段 bbbj=pattem1.exec(datej);/bbb是时间字段，包含一些空字段 if(bbbj!=null)/把空的去掉，取得所有时间字段 dddc=bbbj;/ddd是所有日期的数组 c+=1;for(var b=0;bddd.length;b+)document.body.innerHTML+=<li><span>+dddb+</span>+programb+1+</li>+;/输出所要的内容00:00-00:30 视网More00:30-01:30 45 RPM01:30-02:30 视网More02:30-03:30 视网More03:30-04:00 13亿分贝04:00-05:00 酷乐LA05:00-06:00 视网More06:00-07:00 视网More07:00-08:00 勁爆點08:00-09:00 45 RPM09:00-09:30 视网More09:30-10:00 Double Shot10:00-10:30 视网More10:30-11:00 13亿分贝11:00-12:00 酷乐LA12:00-12:30 劲爆点12:30-13:00 视网More13:00-14:00 视网More14:00-15:00 酷乐LA15:00-15:30 Double Shot15:30-16:00 视网More16:00-17:00 模范棒棒堂17:00-17:30 视网More17:30-18:30 视网More18:30-19:00 13亿分贝19:00-20:00 酷乐LA20:00-20:30 Hit on V20:30-21:00 劲爆点21:00-22