find img element and replace with something using 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/

Simply this should work for you: $('img').attr("align","left"); you don't need to do this and then remove or add attributes — Amitav Roy, Aug 24 '13 at 13:43
Don't try and fix broken code on the client (a browser will try and, *unpredictably*, salvage the HTML when constructing the DOM, which happens before jQuery's `$(document).ready()` event-handling); fix the source of the problem (whatever it is that's generating this broken HTML). — David Thomas, Aug 24 '13 at 13:45

score 1 · Answer 1 · answered Aug 24 '13 at 13:38

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

answered Aug 24 '13 at 13:38

Arun P Johny

384,651
66
527
531

I think he was trying to replace an existing "left" attribute with `align="left"`. It's not in his fiddle but it's in his code.. – Itay Aug 24 '13 at 13:41
You've noted that there is no `left` attribute in the linked demo (not that this breaks the jQuery, but it seems to render the question moot)? – David Thomas Aug 24 '13 at 13:41
@DavidThomas it looks fine after updating the OP's markup also http://jsfiddle.net/arunpjohny/mHawf/2/ – Arun P Johny Aug 24 '13 at 13:45
@Itay from what I understood the OP is trying to make the alignment properly using a jQuery script... which the fiddle seems to be doing – Arun P Johny Aug 24 '13 at 13:46

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

You can use chaining and the attribute selector:

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

jsFiddle here

See aslso:

edited May 23 '17 at 10:32

Community

1
1

answered Aug 24 '13 at 13:42

Petr R.

1,247
2
22
30

score 1 · Accepted Answer · edited May 23 '17 at 12:05

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...

since regex is so cryptic to me I have to ask you what if I want to replace with just one more semicolon after left in my question code — panjo, Aug 24 '13 at 14:04

find img element and replace with something using js

3 Answers3

jsFiddle here