200分求一正则表达式!

yuxh81 2012-09-25 11:45:29


用正则表达式,从html中匹配指定id的html元素,并设置其属性值。

如下:

<img id="img1" src="" /> //查找id为img1的img,并且设置它的src属性值
<div id="div1" class=""></div> //查找id为div1的div,并且设置它的class属性值


谢谢回复!
...全文
408 28 打赏 收藏 转发到动态 举报
写回复
用AI写文章
28 条回复
切换为时间正序
请发表友善的回复…
发表回复
yuxh81 2012-09-27
  • 打赏
  • 举报
回复
需求:
对含有html内容的字符串进行操作,为内容中的dom元素设置属性值。


解决方案:
1:(21楼的代码)使用正则表达式来匹配和替换

2:(27楼的代码)使用jquery将字符串转成dom来进行操作

这个代码比较简洁,利用了jquery本身对dom元素强大的处理能力,就是在使用之前使用了一个转换!


当前应用背景下,这两种方案都可以,方案2更为简洁!
感谢crying_boy兄弟以及大家的热心帮助!
yuxh81 2012-09-25
  • 打赏
  • 举报
回复
别沉了!

其实我的应用是整合flowplayer。
整合过程中遇到了问题,js、jquery无法获取dom,所以只能用这种方法来处理
yuxh81 2012-09-25
  • 打赏
  • 举报
回复
嗯,我没办法说应用环境,因为这样会把问题扯远了!
现在的要求是,只能正则表达式来完成匹配和替换!

[Quote=引用 4 楼 的回复:]

那说下你的应用环境呀,否则谁知道怎么帮你呀??
[/Quote]
泡泡鱼_ 2012-09-25
  • 打赏
  • 举报
回复
那说下你的应用环境呀,否则谁知道怎么帮你呀??
yuxh81 2012-09-25
  • 打赏
  • 举报
回复
首先,谢谢回复!
不过,我的应用环境无法使用js,jquery来获取dom对象!
不然,我不会到这里提问了^_^!!

[Quote=引用 1 楼 的回复:]

呃,这个东东要正则做什么??
HTML code
<script type="text/javascript">
function AppendAttr(a,b){
var o=document.getElementById(a);
for(name in b){
o.setAttribute(name,b[name]);
}
}
AppendAttr……
[/Quote]
  • 打赏
  • 举报
回复
楼上正解
泡泡鱼_ 2012-09-25
  • 打赏
  • 举报
回复
呃,这个东东要正则做什么??
<script type="text/javascript">
function AppendAttr(a,b){
var o=document.getElementById(a);
for(name in b){
o.setAttribute(name,b[name]);
}
}
AppendAttr('test',{"class":'aaa',"src":'bbb'});
alert(document.getElementById('a').innerHTML)
</script>
<div id="a">
<div id="test"></div>
</div>
泡泡鱼_ 2012-09-25
  • 打赏
  • 举报
回复
搞到最后还是使用js完成。既然是基于js,使用jquery做这种操作你想要多容易??

var str='<img id="a" src="" />123<img id="img1" src="" />123<span id="test">test</span><span>打酱油</span><div id="div1" class=""></div>123';
var dom=$("<div>");
dom.append(str);
dom.find("img[id='a']").attr("src","ddd");
alert(dom.html())
MARIDRAUL 2012-09-25
  • 打赏
  • 举报
回复
也跟着学习下哈
yuxh81 2012-09-25
  • 打赏
  • 举报
回复

问题已解决,直接采用21楼的代码!

感谢各位的回复!
  • 打赏
  • 举报
回复

研究下 js 交互
zhuzizuodesi 2012-09-25
  • 打赏
  • 举报
回复
21楼乃高人耶
zhuzizuodesi 2012-09-25
  • 打赏
  • 举报
回复
200分,楼主真舍得
001007009 2012-09-25
  • 打赏
  • 举报
回复
参考下。


String.prototype.addDomAttr = function(id, attr, value){
var s = this,
reDOM = new RegExp('<[^>]+\\sid="'+id+'"[^>]*?>', 'i'),
reAttr = new RegExp(attr+'="[^"]*"' ,'i');
if( reDOM.test(s) ){
var m = s.match(reDOM).toString();
if( reAttr.test(m) ){
var n = m.match(reAttr).toString();
var a = n.split(''),
l = n.lastIndexOf('"') - n.indexOf('"') - 1;
a.splice(n.indexOf('"')+1, l, '');
s = s.replace(m, m.replace(n, a.join('').replace('"', '"'+value)));
}else{
var l = m.lastIndexOf('"');
var a = m.split('');
a.splice(l+1, 0, ' '+attr+'="'+value+'"');
s = s.replace(m, a.join(''));
}
}
return s
};
yuxh81 2012-09-25
  • 打赏
  • 举报
回复
18楼的大哥理解是对的!

有个小问题,请帮忙改一下:
当要替换的属性值不为空时,替换会失败,会变成追加。

如:<img id="img1" src="test.jpg" />

str.addDomAttr('img1', 'src', 'baidu.jpg'));

此时返回的结果为::<img id="img1" src="test.jpg" src="baidu.jpg" />


  • 打赏
  • 举报
回复
9楼10楼也是dom操作啊
001007009 2012-09-25
  • 打赏
  • 举报
回复
楼主 意思是对字符串 进行操作?


参考下



<script type="text/javascript">
String.prototype.addDomAttr = function(id, attr, value){
var s = this,
reDOM = new RegExp('<[^>]+\\sid="'+id+'"[^>]*?>', 'i'),
reAttr = new RegExp(attr+'=""' ,'i');
if( reDOM.test(s) ){
var m = s.match(reDOM).toString();
if( reAttr.test(m) ){
var n = s.match(reAttr).toString();
s = s.replace(m, m.replace(n, n.replace('"', '"'+value)));
}else{
var l = m.lastIndexOf('"');
var a = m.split('');
a.splice(l+1, 0, ' '+attr+'="'+value+'"')
s = s.replace(m, a.join(''));
}
}
return s
};
var str = '<img id="a" src="" />123<img id="img1" src="" />123<span id="test">test</span><span>打酱油</span><div id="div1" class=""></div>123';

alert(str.addDomAttr('img1', 'src', 'baidu.jpg'));
alert(str.addDomAttr('test', 'title', 'i am test'));
alert(str.addDomAttr('div1', 'class', 'className'));
</script>


蓝色小棉袄 2012-09-25
  • 打赏
  • 举报
回复
用正则来获取dom?不可能吧?
  • 打赏
  • 举报
回复
为什么不能用jquery?上代码。估计你设置不当所以没起作用。
  • 打赏
  • 举报
回复
不能用dom就用jquery吧
加载更多回复(8)

87,901

社区成员

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

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