javascript - 处理html字符串的正则表达式-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 处理html字符串的正则表达式

大家讲道理 2017-04-10 14:56:41

[JavaScript讨论组]

624

不是很会使用正则表达式，求各位帮忙看下一个需求

有一段html的字符串，如下

html<p>看<span style="font-size: 15px; line-height: 1.5;">图说话</span></p>
<p><img src="http://a.com/1.png" alt=""></p>
<p> </p>
<p> </p>
<p>再来一张图片</p>
<p><img src="http://a.com/2.png" alt="" width="609" height="590"></p>

需要能够针对字符串中的img标签做如下处理：
1. 加上 width="100%" height="auto"，如果img已经存在width和hegiht，需要先去掉
2. 增加一个onlick事件，传入img的src作为参数

期待的结果是

html<p>看<span style="font-size: 15px; line-height: 1.5;">图说话</span></p>
<p><img src="http://a.com/1.png" alt="" width="100%" height="auto" onlick="foo('http://a.com/1.png')"></p>
<p> </p>
<p> </p>
<p>再来一张图片</p>
<p><img src="http://a.com/2.png" alt="" width="100%" height="auto" onlick="foo('http://a.com/2.png')"></p>

大家讲道理

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

全部回复(2)

PHPz2017-04-10 14:58:41 2楼

var str = '<p>看<span style="font-size: 15px; line-height: 1.5;">图说话</span></p>\
    <p><img src="http://a.com/1.png" alt=""></p>\
    <p> </p>\
    <p> </p>\
    <p>再来一张图片</p>\
    <p><img src="http://a.com/2.png" alt="" width="609" height="590"></p>';

function query( str, callback ) {
    var d = document.createElement("p");
    d.innerHTML = str;
    return callback( d );
}

str = query( str, function( dom ) {
    [].forEach.call( dom.querySelectorAll(dom), function(img) {
        img.setAttribute("width", "100%"),
        img.setAttribute("height", "auto"),
        img.setAttribute("onclick", "foo('"+ img.src +"')")
    })
    return dom.innerHTML;
})

赞 +0

添加回复

怪我咯2017-04-10 14:58:41 1楼

Regex不太會, 但是用JavaScript還是可以的.

js(function(){
  $('img').each(function(){
    $this = $(this);
    $this.attr({
        width: '100%',
        height: 'auto',
        onclick: "foo('" + $this.attr('src') + "')"
    });
  });
}());

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>