How to Change All Links with javascript - 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')))
});

Related

How to add value on URL using <a href> when it got clicked using javascript

so I have four links with different Href for example
<a href="markmendoza.com/123">
<a href="markmendoza.com/555">
<a href="markmendoza.com/666">
<a href="markmendoza.com/999">
and I wanted to manipulate the href when it got clicked by adding some more value
when it get click it will be:
markmendoza.com/123/?Sample
markmendoza.com/555/?Sample
markmendoza.com/666/?Sample
markmendoza.com/999/?Sample
I got here my code
let a = document.querySelectorAll('a');
for (let i = 0; i < a.length; i++) {
a[i].addEventListener("click", function(event) {
event.target.href = event.target.href + '/?Sample';
}
its adding fine but once you click it many times it just adds the /?Sample on the end of the link again and again so if I clicked the link 10x it will be markmendoza.com/123/?Sample?Sample?Sample?Sample?Sample?Sample?Sample
If you only want to add it once guard it’s with an if statement like so:
for (let i = 0; i < a.length; i++) {
a[i].addEventListener("click", function (event) {
if (!event.target.href.includes('/?Sample')) { //add this
event.target.href = event.target.href + '/?Sample';
}
});
}
Try this
let links = document.querySelectorAll('a');
jQuery.each( links, function( a, val ) {
a.addEventListener("click", function(event) {
link_href = event.target.href || ''
if(!link_href.includes('/?Sample') {
event.target.href = link_href + '/?Sample';
}
}
});

Using Javascript to Replace Link

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

javascript equivalent of jquery for this function

In a dinamically generated "ol" :
document.getElementsByTagName('ol');
for (i = 0; i < len; i++){
var newLi = document.createElement("li");
var link = document.createElement('a');
link.href = "#";
link.innerHTML = (results.rows.item(i).location + "-" + results.rows.item(i).datte);
newLi.appendChild(link);
olnew[0].appendChild(newLi);
i need find the "li" clicked, i use jquery library only for this function, i am searching for the same functionality in javascript, but at momento i have not idea how i can code it. thx
var ss;
ss=$("#idfromOl");
ss.click(clickhecho);
}
function clickhecho()
{
var $all_lis = $('li');
$all_lis.on('click', function() {
var index = $all_lis.index(this);
});
}
try this:
function createfunc(i) {
return function() { alert(i); };
}
for (i = 0; i < len; i++){
var newLi = document.createElement("li");
var link = document.createElement('a');
link.href = "#";
link.innerHTML ="test"
newLi.appendChild(link);
// just add onclick event; use createFunc to create function closure (otherwise 'i' would always be the last 'i'
newLi.onclick = createfunc(i);
olnew[0].appendChild(newLi);
}
I might be mistaken, but is this what you are looking for?
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function (e) {
$("#clickedLi").text(e.srcElement.id);
});
}
It appends an event called addEventListener to every li element.
Inside each li element there is an click event given as a parameter which contains the id of the li clicked.
demo: http://jsfiddle.net/DUzMc/1/
Your first part of script is incomplete, so I did a short script to generate a dynamic list.
Basicly you were looking for addEventListener():
var elements = 10;
ol = document.createElement('ol');
for(i = 1; i <= elements; i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.setAttribute('href', '#');
a.text = 'Link ' + i;
li.appendChild(a);
ol.appendChild(li);
a.addEventListener("click", who, false); // THIS IS THE IMPORTANT PART
}
document.getElementsByTagName('body')[0].appendChild(ol);
function who(e){
var myTarget = e.target;
myTarget.text = "clicked!";
}
The easiest way is to include the event while generating the list:
document.getElementsByTagName('ol');
for (i = 0; i < len; i++){
var newLi = document.createElement("li");
var link = document.createElement('a');
link.href = "#";
link.innerHTML = (results.rows.item(i).location + "-" + results.rows.item(i).datte);
// Add this
link.onclick = function(index) { return function() {
// do something with index variable
}}(i);
newLi.appendChild(link);
olnew[0].appendChild(newLi);
Note I use a local variable index instead of i, this is because when the item is clicked the value of i will be different (equal to len).

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 disable the hyperlinks in a div

How can I disable all hyperlinks in a div element? I don't want any active links in my div(editable).
jQuery:
$("#myEditableDiv a").click(function(e){ e.preventDefault(); });
Old and considered bad.
$("#myEditableDiv a").click(function(){ return false; });
using javascript you can write a simple method as given below -
function disableLinksByElement(el) {
if (document.getElementById && document.getElementsByTagName) {
if (typeof(el) == 'string') {
el = document.getElementById(el);
}
var anchors = el.getElementsByTagName('a');
for (var i=0, end=anchors.length; i<end; i++) {
anchors[i].onclick = function() {
return false;
};
}
}
}
//Call to function as
disableLinksByElement('mydiv');
First grab all the links.
var links = editable.getElementsByTagName('a'); // where "editable" is a var pointing to your div
Then set the onclick to false.
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onclick = function() { return false; };
}

Categories