Javascript: pattern HREF needs to be replaced - javascript

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

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 !

Javascript to "fix" all hrefs of class with regex

Say I have a bunch of links on a page like:
<a class="eg-vimeo1-element-0 eg-post-14" href="http://255972693" target="_self"><i class="eg-icon-play"></i></a>
And I want to change every http://255972693 to https://vimeo.com/video/255972693
I tried this to see my hrefs:
let e = document.getElementsByClassName("eg-vimeo1-element-0");
for (var i = 0; i < e.length; i++){
console.log(e[i].href);
console.log(e[i].href.replace("http://", "https://vimeo.com/video"));
}
<a class="eg-vimeo1-element-0 eg-post-14" href="http://255972693" target="_self"><i class="eg-icon-play"></i></a>
But it converts the href to an IP and gives results like
http://vimeo.com/video/15.65.213.85/
It will work if you use getAttribute on the href property.
const e = document.getElementsByClassName("eg-vimeo1-element-0")
for (var i = 0; i < e.length; i++) {
const href = e[i].getAttribute('href');
e[i].href = href.replace("http://", "https://vimeo.com/video/");
}
<a class="eg-vimeo1-element-0 eg-post-14" href="http://255972693">link</a>
Here's the updated jsFiddle.
And to preserve the comment from Niet the Dark Absol in case it disappears:
"The reason this works and .href doesn't is because .href is the resolved URL, and http://1234567 is interpreted as an IP address in decimal form."
Please try this:
let e = document.getElementsByClassName("eg-vimeo1-element-0");
for (var i = 0; i < e.length; i++){
var href = e[i].getAttribute('href');
console.log('previous href: ', href);
e[i].setAttribute('href', href.replace("http://", "https://vimeo.com/video/"));
console.log('new href:', e[i].getAttribute('href'));
}
<a class="eg-vimeo1-element-0 eg-post-14" href="http://255972693" target="_self"><i class="eg-icon-play"></i></a>
Try with getAttribute
let e = document.getElementsByClassName("eg-vimeo1-element-0");
for (var i = 0; i < e.length; i++){
var url = e[i].getAttribute('href');
alert(url.replace("https://", "https://vimeo.com/video/"));
}

I want to extract href value from hyperlink through document.querySelector

var x = document.querySelectorAll(".indexed-biz-name");
for (i = 0; i < x.length; i++) {
document.write(x[i].innerHTML + "<br>");
}
When i run this code through greasemonkey it gives me output which is hyperlink in it. I want to extract the url within a same working.
Below is a snippet that does that you want
var links = document.querySelectorAll(".indexed-biz-name");
document.write('</br></br>')
for (i = 0; i < links.length; i++) {
document.write(links[i].getAttribute("href")+'</br>');
}
link1
<br/>
link2
<br/>
link3

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

Categories