I'm trying to build a html file to prepend and replace string.
for example, if my url for css file,
<link href="/srsstore/store/-1/common/components/cbsassets/styles/iPhone.css" type="text/css" rel="stylesheet" />
And url for image file,
<img src="/s/store/-1/ProductizedWidgets/transparent.png" width="1px" height="1px"/>
Also, for background image
<div style="background-color: #e45600;background-image: url(/s/store/4812610/no_preview.gif);background-repeat:repeat-x;font-weight:bold;font-family:Helvetica, Arial, sans-serif; font-size:12px;color:#FFFFFF></div>
and I want to prepend "domain.com" to these urls. How do i search and replace a string dynamically using javascript.
The content is getting from this url:
http://euroleagueiphone.mo2do.net/s/31653/Home?ebbLinkIndex=0&backTitle=Home&iPhoneMode=app&debugRender=true&appVersion=2.2&engineVersion=1.3
You can try this:
window.onload = function() {
var domain = 'YOUR_DOMAIN';
// For images
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute("src",domain + imgs[i].getAttribute("src"));
}
// For CSS files
var links = document.getElementsByTagName("link");
for (var i = 0; i < imgs.length; i++) {
links[i].setAttribute("href",domain + links[i].getAttribute("href"));
}
};
Edit:
For the divs add the following code to the above:
// For CSS files
var styleProp = 'background-image';
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if(divs[i].currentStyle) {
divs[i].style['styleProp'] = domain + divs[i].currentStyle[styleProp];
} else if (window.getComputedStyle) {
divs[i].style['styleProp'] = domain + document.defaultView.getComputedStyle(divs[i],null)
.getPropertyValue(styleProp);
}
}
You can get help form Get Styles.
$("img").each(function(){
$e = $(this);
$e.attr("src","http://example.com" + $e.attr("src"));
})
$("link").each(function(){
$e = $(this);
$e.attr("href","http://example.com" + $e.attr("href"));
})
Use jquery
You need to find all the a's and img's in your code, loop through them, get the current attribute value (whether src or href), prepend your domain to it, and then set the attribute value. I haven't tested this, but this is the general idea:
var links = document.getElementsByTagName("a");
var images = document.getElementsByTagName("img");
for (i=0; i < links.length; i++) {
links[i].setAttribute("href","domain.com" + links[i].getAttribute("href"));
}
for (i=0; i < images.length; i++) {
images[i].setAttribute("src","domain.com" + images[i].getAttribute("src"));
}
Related
Im trying to make a div expanded once you click on another div. In my case I'm try to make div with some text in it expand when the image is clicked. A link to my JSFiddle - https://jsfiddle.net/txoyuvqn/3/
My javascript that I am using looks like.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '500px'
whattochange[i].style.transition = 'all 1s'
whattochange[i].style.backgroundColor = 'red'
}
}, false);
However when I click on the class called image it effects all the Text classes, i know it's because were changing the css to all of the text divs, however is there a way to make it only effect the correlating div? Or am I going about creating this in the wrong way?
getElementsByClassName returns an array, not a single element.
divs is an array, and you are correctly using a for loop and the index indicator [i] after your variable name divs.
You need a similar for loop for whattochange.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
There may be a better way, but you could do it like this:
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
{
divs[i].addEventListener("click", function()
{
var w = document.getElementById(this.id.replace('img', 'text'));
w.style.width = '800px'
w.style.transition = 'all 1s'
w.style.backgroundColor = 'red'
});
whattochange[i].id = 'text' + i;
divs[i].id = 'img' + i;
}
See the fiddle
Javascript
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
}
You have to be sure that the elements exist if your JavaScript code depends on them. The reason why your fiddle didnt work was because, you was not loading the script after the body has finished loading.
In your code, One way of achieving this is by putting the <script> tag at the end of the body like this:
<html>
<head></head>
<body>
<script type="text/javascript">
// code here
</script>
</body>
You can also put all your code in a function for the window.onload event or use jQuery.
I'm using this Javascript code in an attempt to replace the links on a page with a message that says "DOWNLOAD", with a hyperlink that leads to my registration page.
The problem is the "DOWNLOAD" text is not replacing the original link text. The original link is displayed. It does lead to the registration page, but again, the original link on the page is still visible as text.
Any ideas?
<script>
function replaceLinks() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].innerHtml = 'DOWNLOAD' +
'register here.';
links[i].href = 'register.php';
}
}
</script>
It should be:
function replaceLinks() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].innerHTML = 'DOWNLOAD register here.';
links[i].href = 'register.php';
}
}
The property is innerHTML, the last part is all uppercase. And you don't need to nest another link inside the link.
It looks like you have a capitalization issue - it should be innerHTML. You can also remove other parts of your code:
function replaceLinks() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
console.log(links);
links[i].innerHTML = 'DOWNLOAD';
links[i].href = 'register.php';
}
};
In jQuery way,
function replaceLinks() {
var links = $('a');
for (var i = 0; i < links.length; i++) {
links[i].html('DOWNLOAD register here.');
links[i].attr('href') = 'register.php';
}
}
`
<ul class="flickr-badge-content">
<li class="first">
<img data-photo-attribution="andysouthwales" data-photo-page="http://www.flickr.com/photos/andysouthwales/1212121/" data-photo-title="abcd" data-photo-id="1212121" src="http://farm3.static.flickr.com/2855/1212121_ce6bfd5c38_s.jpg"></img>
</li>
<li>
<img data-photo-attribution="andysouthwales" data-photo-page="http://www.flickr.com/photos/andysouthwales/1263324993173/" data-photo-title="tennn" data-photo-id="1263324993173" src="http://farm8.static.flickr.com/7457/1263324993173_0e3e9745f8_s.jpg"></img>
</li>
<li>..............</ul>.......
I want to get all image and their attributes. Please Help...
You can cycle through all of the images attributes by using
$('img').each(function(currentImage){
console.log(currentImage.data('photo-attribution')); //log some attribute
});
I'm sure that you will figure the rest out.
I have provided you an example which selects all the image tag and gets the source attribute of each of them. You can use this to get whichever attribute you want.
Using JavaScript
var images = document.getElementsByTagName('img');
var srcList = [];//This is just for the src attribute
for(var i = 0; i < images.length; i++) {
srcList.push(images[i].src);
}
Instead of document.getElementsByTagName('img') you could also use the document.images collection.
function allSrc() {
var src = [];
var imgs = document.images;
for (var i=0, iLen=imgs.length; i<iLen; i++) {
src[i] = imgs[i].src;
}
return src;
}
Using Jquery:
var srcList = $('img').map(function() {
return this.src;
}).get();
try
$(document).ready(function () {
var images = $("img");
for (i = 0; i < images.length; i++) {
alert($(images[i]).attr("data-photo-attribution"));
}
});
There you go:
$('.flickr-badge-content li img').each(function(){
var data = $(this).data();
for(var i in data){
$('<li>', {
text: i + ': ' + data[i]
}).appendTo('.flickr-badge-content');
}});
Working Fiddle
I'm looking for a way to replace an image that could be used anywhere on a page.
So if we have an example html page like this:
<html>
<head>
</head>
<body>
<img id="1" src="example.com/img/1889.png">
<div style="background: url('example.com/img/1889.png')">
<div>
<a>
<img id="2" src="example.com/img/1889.png">
</a>
</body>
</html>
Where ever - example.com/img/1889.png - appears, it must be replaced with something else.
EDIT
Unfortunately I can't use any javascript libraries. Its for a browser plugin. Nor can I use browser specific APIs
There might be some syntax errors here, but basically just try something like:
<script>
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src == "oldImg")
imgs[i].src = "newImg";
}
}
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].style.backgroundImage == "oldImg")
divs[i].style.backgroundImage = "newImg";
}
}
</script>
The following code does what you're looking for:
var images = document.querySelectorAll('[src]'), // all image and input elements
styled = document.querySelectorAll('[style]'), // all elements with inline style
iLen = images.length,
sLen = styled.length,
url = 'example.com/img/1889.png', // the string you're searching for
str = 'some/string', // replace with whatever you choose
i;
// check for 'example.com/img/1889.png' in image source
for (i = 0; i < iLen; i += 1) {
if (images[i].src.indexOf(url) !== -1) {
images[i].src = str;
}
}
// check for 'example.com/img/1889.png' in either background or background-image
for (i = 0; i < sLen; i += 1) {
if (styled[i].style.backgroundImage.indexOf(url) !== -1) {
styled[i].style.backgroundImage = 'url(' + str + ')';
}
}
Demo
I want to change all links of my site. Suppose a link given by .Example http://www.google.com/ changes to http://www.mysite.com/?redirect=http://www.google.com/
i have my own redirector just i need to change the links via javascript for all url
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].href = "http://www.mysite.com/?redirect=" + anchors[i].href
}
You can then make the code run on page-load by wrapping it in a function linked to window.onload event:
window.onload = function() {
/* onload code */
}
If you use javascript without a framework, you can use the following lines:
var links, i, le;
links = document.getElementsByTagName('a');
for (i = 0, le = links.length; i < le; i++) {
links[i].href = "http://www.mysite.com/?redirect=" + encodeURIComponent(links[i].href);
}
Just another version with some checks for local links and .forEach()
var links = [].slice.apply(document.getElementsByTagName("a"));
links.forEach(function(link) {
var href = link.href;
if (href.length && href.substring(0, 1) !== "#" && href.substring(0, 1) !== "/") {
link.href = "http://www.mysite.com/?redirect=" + encodeURIComponent(link.href);
console.log(link.href);
}
});
$('a').each(function(i, e)
{
var current = $(this);
current.attr('href', 'http://www.mysite.com/?redirect=' + encodeURIComponent(current.attr('href')))
});