How can I replace a placeholder on the entire HTML page using JQuery?
I have a demo HTML page that contains the "|| client ||" placeholder. It is used throughout the page, for example:
<img src="images/||_client_||/img1.jpg" />
or
<title>||_client_|| Demo</title>
etc.
I want to globally replace the splitter with the appropriate client id after the page has loaded. The page is for demonstration purposes only, so I don't want to configure the back end.
I am binding to this:
$('div:jqmData(role="page")').on('pagebeforecreate', function() {
// replace ||_client_|| with some ID
});
Question:
Is there a JQuery way to run through the DOM and find all instances of my placeholder and replace them or should I do each one by hand and search for all img tags, check the src for a substring and replace that substring? There must be a nicer way?
Thanks for the help!
source to share
Why do you need jQuery?
document.body.innerHTML = document.body.innerHTML.replace(/\|\|_client_\|\|/g, 'your text here');
For the whole page:
var html = document.getElementsByTagName('html')[0];
html.innerHTML = html.innerHTML.replace(...);
As a caveat, make sure you do this after the page is ready (so the body has all the elements) and before attaching events to any elements.
source to share
You can loop through every object <img />
on the page and just search / replace.
$('div:jqmData(role="page")').on('pagebeforecreate', function() {
$('img').each(function(){
var newVal = $(this).attr('src').replace('||_client_||', theClientId);
$(this).attr('src', newVal);
});
});
Instead of using it $('img')
, I would suggest clarifying the selector to only scroll through images in a specific div $('#theDiv img')
or a specific class $('img.placeholder')
. The class variant is probably the best. You just need to add class="placeholder"
to each image you want to scroll.
source to share
in fact you can do it like this:
//getting the html dom as string
var myStr = $("body").html();
//use reguler expression to replace your placeholder
myStr = myStr.replace(/\|\|\_client\_\|\|/gi,"Fareed");
//return it back to the dom
$("body").html(myStr);
note: / gi for global and insensitive case
source to share
Here's an example that will replace all "|| client ||" with "replace_string" throughout the document.
<html>
<head>
<title>||_client_|| Demo</title>
</head>
<body>
<h1>||_client_||</h1>
<img src="images/||_client_||/img1.jpg" />
</body>
<script type="text/javascript">
document.documentElement.innerHTML = document.documentElement.innerHTML.split('||_client_||').join('replace_string');
</script>
</html>
source to share
You can convert your entire page to html using the .html () function and then replace the placeholder and set the resulting result using .html (). This will probably not be very efficient, but it might work for you.
// Suppose we have a div with a test class: <div class="test">{PLACEHOLDER} title</div>
var div = $('.div')
var src = $(div).html()
src = src.replace('{PLACEHOLDER}', 'Test')
div.html(src)
// Your div now contains: <div class="test">Test title</div>
Good luck!
source to share