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
– Amitav Roy, Commented Aug 24, 2013 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
– David Thomas, Commented Aug 24, 2013 at 13:45

Community · Accepted Answer · 2017-05-23 12:05:35Z

1

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

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 24, 2013 at 14:00

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

panjo Over a year ago

since regex is so cryptic to me I have to ask you what if I want to replace <img left; ../> with <img align="left" /> just one more semicolon after left in my question code

Arun P Johny · Accepted Answer · 2013-08-24 13:38:00Z

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, 2013 at 13:38

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

4 Comments

Itay Over a year ago

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

David Thomas Over a year ago

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)?

Arun P Johny Over a year ago

@DavidThomas it looks fine after updating the OP's markup also jsfiddle.net/arunpjohny/mHawf/2

Arun P Johny Over a year ago

@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

Community · Accepted Answer · 2017-05-23 10:32:15Z

1

You can use chaining and the attribute selector:

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

jsFiddle here

See aslso:

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Aug 24, 2013 at 13:42

Petr R.

1,2372 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

find img element and replace with something using js

3 Answers 3

1 Comment

4 Comments

jsFiddle here

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related