jquery replace string from html()

Question

I am trying to replace a CSS style in the following code:

var theHTML = this.html();
theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"");
alert(theHTML);

The html looks like this:

<IMG SRC="picturesFromServer.asp?PhotoId=365481" style="display:none;">

However once i check to see if it changed it or not it keeps displaying none instead of inline. I'm just trying to make it visible before i print it.

Why does the HTML have style="display:none;" in the first place? — No Results Found
– No Results Found, Commented Mar 1, 2012 at 4:11
@Madmartigan: To hide the image from the user. Then it prints out. Hints thats why i want to show it before it prints. — StealthRT
– StealthRT, Commented Mar 1, 2012 at 4:20

gideon · Accepted Answer · 2012-03-01 04:10:27Z

6

You could use JQuery's .css() method:

$("img").css("display","inline");

answered Mar 1, 2012 at 4:10

gideon

19.5k11 gold badges74 silver badges114 bronze badges

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

2 Comments

StealthRT Over a year ago

Meaning this.html().css("display","inline");?

gideon Over a year ago

@StealthRT this=> $("img") will select all image tags. You could give you image tag some id, lets say <img id='target' .. then you can use $("#target") to select that image. Are you looking to target ALL images or ALL tags in the whole document?

Malitta N · Accepted Answer · 2012-03-01 05:02:11Z

1

EDIT : If what you are trying to accomplish is, get the img tag inside this and append it somewhere else, with display:none; do this.

http://jsfiddle.net/tL3Uf/

HTML

<div id="mainContainer">
    <img src="http://imgh.us/business-online.jpg" style="display:none;" /> </div>

<div id="destination"></div>

Javascript

$(function(){
    var $img = $("#mainContainer img").clone();
    $img.show(0).appendTo('#destination');
});

CSS

#incase image doesnt load

img{
  padding: 10px;
  background: #f00;        
}

edited Mar 1, 2012 at 5:02

answered Mar 1, 2012 at 4:12

Malitta N

3,42325 silver badges30 bronze badges

3 Comments

No Results Found Over a year ago

It's a bad solution to begin with, doing a string replace.

StealthRT Over a year ago

Did not work i am afraid. B. VB's suggestion did work though but didn't show the image when it was printed out.

Malitta N Over a year ago

@StealthRT i edited my answere. it works now. check the fiddle

Bill · Accepted Answer · 2012-03-01 04:13:38Z

1

I'm really not a jQuery master, but in Javascript are strings immutable? Should you try something like

theHtml = theHtml.replace(...)

answered Mar 1, 2012 at 4:13

Bill

2,3499 gold badges30 silver badges37 bronze badges

1 Comment

StealthRT Over a year ago

That worked but when i print it out it has no image so its still hidden :o(

Tejasva Dhyani · Accepted Answer · 2012-03-01 04:38:42Z

0

replace the first two lines of the given code with this line :

$(this).find("img").css("display","inline");

edited Mar 1, 2012 at 4:38

answered Mar 1, 2012 at 4:29

Tejasva Dhyani

1,3621 gold badge10 silver badges19 bronze badges

2 Comments

Tejasva Dhyani Over a year ago

the html contains an image tag, and you want to change the display of that tag...I suggest go for the .css() instead of string replacement.

ndp Over a year ago

I agree. This is the nicest way to accomplish showing the image, taking advantage of what jQuery is good at.

nnnnnn · Accepted Answer · 2012-03-01 05:18:07Z

The string .replace() method doesn't update the string you call it on, it returns a new string - so that's why your alert(theHTML) continues to display the original string. If you said this:

theHTML = theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"")

Then alert(theHTML) would show the replaced version.

However, that still won't have any effect on the actual img element, because it is still just a manipulation of a string variable that has no connection to your element. To actually make the img element visible you'd have to replace it with a new element generated from your string, which is a hassle, or you can just set the display property directly:

$(this).css("display", "inline");

Note also that your original code said this.html() - it seems unlikely that this would be a jQuery object that you can call the jQuery .html() method on, it is more likely to be the DOM element itself in which case you'd need to say $(this).html(). So if any of the answers don't work it might be related to how you are getting the this reference to the img element in the first place - might be helpful if you could update your question to show that.

Note also that if the idea here is for the img element to appear in printed output but not otherwise you can do that with CSS:

@media all {
   img.printOnly { display: none; }
}
@media print {
   img.printOnly { display: inline; }
}

Give the "printOnly" class (or whatever classname you want to use) to any elements that should appear for print only. Or specify by id. Whatever.

Collectives™ on Stack Overflow

jquery replace string from html()

5 Answers 5

2 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related