Replace values in HTML thats inside

Question

I've spend most of my weekend being blind on what seems like a simple fix, so therefor i'm turning to you guys expertise.

I have X instances of the following script tag (but always with the same class name):

In which I first need to replace the %%THEMEPATH%% with a variable that contains a site name which could be "http://mydomainname.com". When that replace is done I need the src of the img tags inside the script tags are replaced with the value data-image value.

But I can't seem to get it to work the way I want because the HTML is inside a script tag. Here is the what i've been working on so far, but it' doesn't really seem to do the job :(

jQuery(".tmpl-popup").each(function(index){

        var haystack = jQuery(this).html(),
            needle = haystack.replace(/%%THEMEPATH%%/g, themePath);

            jQuery(this).html(needle);

            var popup = jQuery(jQuery.parseHTML(haystack)),
                imageSrc = jQuery(popup).find('img').data('image'),

            jQuery(popup).find('img').attr('src',imageSrc);

            jQuery(this).html(popup);       

    });

So thanks in advance if anyone can help me out there :(

T.J. Crowder · Accepted Answer

You can use the function callback version of jQuery's html and use a global string replace for the %%THEMEPATH%% part, and then (as you came up with) parse the HTML and handle the images in it before going back to source to update the script element text:

$("script.tmpl-popup").html(function(_, html) {
  // Update %%THEMEPATH%%
  html = html.replace(/%%THEMEPATH%%/g, "http://example.com");

  // Update src: `$.parseHTML` gives us an array of the top-level elements.
  // we loop through them, finding any `img[data-image]` that they contain,
  // and updating the `src` on those.
  return $.parseHTML(html).map(function(element) {
    // Note: If it were possible for an `img[data-image]` to be *at* the top
    // level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
    $(element).find("img[data-image]").attr("src", function() {
      return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
    });
    return element.outerHTML;
  });
});

$("script.tmpl-popup").html(function(_, html) {
  // Update %%THEMEPATH%%
  html = html.replace(/%%THEMEPATH%%/g, "http://example.com");
  
  // Update src: `$.parseHTML` gives us an array of the top-level elements.
  // we loop through them, finding any `img[data-image]` that they contain,
  // and updating the `src` on those.
  return $.parseHTML(html).map(function(element) {
    // Note: If it were possible for an `img[data-image]` to be *at* the top
    // level, you'd need: `$(element).find("img[data-image]").addBack("img[data-image").attr...
    $(element).find("img[data-image]").attr("src", function() {
      return this.getAttribute("data-image"); // or $(this).attr("data-image") if you want more jQuery :-)
    });
    return element.outerHTML;
  });
});

You'll have to use right-click Inspect Element to see that the change has happened. :-)

Replace values in HTML thats inside <script> tags with Jquery

Answers (1)

Related Questions

Replace values in HTML thats inside &lt;script&gt; tags with Jquery

Answers (1)

Related Questions

Replace values in HTML thats inside <script> tags with Jquery