查找img元素并使用js替换为某些内容

Question

My source is generated with obvious error in setting align and margin attribute at img element. So my html src is

<p><img left margin: 5px;" src="http://techtools4biz.com/wp-content/uploads/2011/06/Google-logo-300x242-150x150.jpg" alt="" /></p>

ofcourse it should be <img align="left" margin=".." src="..." />

In my previous question someone recommended to use find left element which and to replace him with align left property like this

$('img'.attr("left")){
    $(this).removeAttr('left');
    $(this).attr("align","left");
};

Tried and it doesn't work, any suggestions?

here's the link http://jsfiddle.net/GJRmB/

Answer 1

You are mismatching the brackets

var $img = $('img');
$img.removeAttr('left');
$img.attr("align","left");

Demo: Fiddle

or use chaining

jQuery(function(){
    var $img = $('img').removeAttr('left').attr("align","left");
})

Demo: Fiddle

Answer 2

You can use chaining and the attribute selector :

$('img[left]').removeAttr('left').attr("align","left");

jsFiddle here

See aslso:

• How does jquery chaining work?
• Has Attribute Selector [name] in the jQuery documentation

Answer 3

If it is guaranteed that the pattern will be always like that, you can use Regex. Actually you should fix whatever generates the source to start with... but lets go...

Example on JSFiddle

// the image is wrapped in `p`, so we can easily grab its generated HTML code
var imgMessedHtml = $("img").parent().html();

// now assuming that pattern is always like that, we can try extracting the
// attributes
var align = imgMessedHtml.match(/img (\w+)/i)[1];
var margin = imgMessedHtml.match(/margin.*?(\d+px)/i)[1];

After we get the information we need, we can fix the source

// I am removing everything between `img` and `src`
$("img").parent().html(
    imgMessedHtml.replace(/img.*?src/i, "img src")
);

Now with the data we extracted we can set it to the img

$("img").attr("align", align);
$("img").attr("margin", margin);

Regex is really not recommended to parse HTML , but if you have no other choice then...