js正则匹配html中的img标签，然后将img标签插入到另外的div里。

JavaScript06

js正则匹配html中的img标签，然后将img标签插入到另外的div里。,第1张

var html = 'fdsafds<img src=fdsaf>fdsafdsaf<img src=fdsaf>'

var imgs = html.match(/<img[^>]+>/g)

document.getElementById('test').innerHTML = imgs.join('')

var img = document.getElementsByTagName('img')[0]

// 注意，我使用了\w 来匹配图片名，表示匹配[A-Za-z0-9_]之内的字符都能被匹配到

// 另外最后我使用一个表达式来限定只匹配图片后缀

console.log(img.src.match(/\/(\w+\.(?:png|jpg|gif|bmp))$/i)[1])

<!DOCTYPE HTML>

<html>

<head>

<title>Page Title</title>

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

<script>

onload = function (){

var html = document.body.innerHTML

var reg = /(<img(?:(?!id|>).)*)(id[\=\"\'\s]+)?([^\"\'\s]*)([\"\']?)([^>]*>)/gi

var idx = 0

html = html.replace(reg, function($0, $1, $2, $3, $4, $5){

idx++

if(typeof $2 == "undefined"){

return $1 + " id='" + idx + "'" + $3 + $4 + $5

}

return $1 + $2 + idx + $4 + $5

})

document.body.innerHTML = html

}

</script>

</head>

<body>

<img src="acb.jpg" id="imgx" />

<ul>

<li><img src="sdf.png" /></li>

</ul>

 

</body>

</html>