Using Javascript to Replace Link - javascript

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';
}
}

Related

How to replace href of anchor tags with array of links?

// I am trying to replace href with array of links
var link = ['replaceLink1', 'replaceLink2'];
var links = document.querySelectorAll('a');
for(var i = 0; i < link.length; i++){
for(var j = 0; j < links.length; j++){
links[j].setAttribute('href',link[i]);
}
}
you don't need to loops just remove one and use the iterator to go throw both arrays
var link = ['replaceLink1', 'replaceLink2'];
var links = document.querySelectorAll('a');
for (var i = 0; i < link.length; i++) {
links[i].setAttribute('href', link[i]);
}
<a href="/link1" > click me ! </a>
<a href="/link2" >click me ! </a>
you can loop with for of loop each anchor tag in the page and replace the href attribute with the corresponding link from an array (that have to be the same size as all the links on the page otherwise you'll get undefined as a link) like so:
var linksToReplace = ['replaceLink1', 'replaceLink2'];
var links = document.querySelectorAll('a');
for (let [i, link] of links.entries()) {
link.setAttribute('href', linksToReplace[i]);
}
click me !
click me !

Redirect all my site links except (example.com)

I want to redirect all links except for a specific URL (example.com)
I used this JavaScript code:
<script type="text/javascript">
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].href = "http://test.com/url=" + anchors[i].href
}
</script>
You just need a small change:
window.onload = function() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
if (!anchors[i].href.match(/site\.com/))
anchors[i].href = "http://test.com/url=" + anchors[i].href
}
}

javascript add relative path to all links dynamically

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"));
}

How to Change All Links with javascript

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')))
});

Javascript: pattern HREF needs to be replaced

Suppose on my HTML page I have many hrefs to a link.
Using Javascript, I need to loop through all hrefs and replace them with something and I don't have any ids to a href.
Please help.
var anchors = document.anchors;
for(var i=0,len=anchors.length;i<len;i++){
anchors[i].href = 'some_new_url';;
}
Edit (after OP's comment)
document.anchors return anchors collection provide anchors have name attribute in them.
These are valid anchors for document.anchors
<a href='http://www.link1.html' name=''>Link1</a>
<a href='link2.html' name=''>Link2</a>
But this is not,
<a href='link2.html'>Link2</a>
Better, use this instead
var anchors = document.getElementsByTagName('a');
for(var i=0,len=anchors.length;i<len;i++){
anchors[i].href = 'some_new_url';;
}
<script type='text/javascript'>
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.href; i++) {
anchors[i].href = 'new target';
}
</script>
...
<a href='link1.html'>Link1</a>
<a href='link2.html'>Link2</a>
Edit :
Just another way :
var length = document.links.length;
for (var i = 0; i < length; i++) {
document.links[i].href = 'new target';
}

Categories