Replace values in HTML thats inside <script> tags with Jquery
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , 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;
});
});
<p>You'll have to use right-click Inspect Element to see that the change has happened. :-)</p>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
</li>
<li>
<a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
</li>
</ul>
<a href="#" class="focus"></a>
</div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
</li>
<li>
<a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
</li>
</ul>
<a href="#" class="focus"></a>
</div>
</script>
<script type="text-html" class="tmpl-popup"><div class="acf-fc-popup">
<ul>
<li>
<a href="#" data-layout="one_column" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/one_column.png" /> <span>One Column</span></a>
</li>
<li>
<a href="#" data-layout="two_columns" data-min="" data-max=""><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-image="%%THEMEPATH%%/images/admin/layouts/two_columns.png" /> <span>Two Columns</span></a>
</li>
</ul>
<a href="#" class="focus"></a>
</div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
jquery replace only text in a div with other tags in it
Date : March 29 2020, 07:55 AM
it should still fix some issue I have a div that contains text and other tags in it $('#Field').contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('Text to replace','Hi I am replace');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Field"><span> </span>Text to replace<div ></div></div>
|
How to replace plain text with a specific value with the same text but <font> tags around it with JS or jQuery on
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , I have the following button: , The easiest would be to add a css style. Something like button.sz-grid-dropdown.sz-grid-button {
color: red;
}
var buttons = $("button").filter(function() {
return (this.innerText === "SIZE 10");
});
|
How to replace text between two XML tags using jQuery or JavaScript?
Date : March 29 2020, 07:55 AM
|
replace all </script> tags with <\/script> in javascript or jquery
Date : March 29 2020, 07:55 AM
|
Boards Message :
Related QUESTIONS :