Javascript that changes specific href link to new one? (no jquery) - javascript

Friends, can you give me simple javascript that will change href link with new one on all posts in my blogger blog.
<a href="http://domainone.com/brb.php">
to become
<a href="http://domaintwo.com/brb.php">
the problem is that domainone is no longer available and I need a mass change when user asks for this domain to be directed to the new one.
please no jquery only oldschool javascript.
Regards!

you can use .setAttribute(), something like this:
var links = document.getElementsByTagName('a')
for(var i=0;i<links.length;i++){
if(links[i].getAttribute('href') && links[i].getAttribute('href').indexOf('domainone') >=0 )
links[i].setAttribute('href', 'http://domaintwo.com/brb.php');
}
link

//If you want to change All a tags href, Use it
var aTags = document.querySelectorAll('a');
for (var tag of aTags) {
tag.setAttribute('href','http://domaintwo.com/brb.php');
}
//If you want to change specific one, Use it.
var aTag = document.querySelector('#first');
aTag.setAttribute('href','https://stackoverflow.com//posts/45746835');
a
b
c
Try This.
The important thing is using setAttribute

Related

How to check if link is present on a page with Jquery?

I have this link on my web page:
Terms and conditions
I want to use Jquery to check whether this specific link is present or not on the web page. I know how to check if text is present on a page, but am struggling a little with links. If it helps, it is only the terms-conditions-mywebsite bit that I need to use (as mywebsite changes depending on who is using the site).
The class is footer so I have tried $('.footer:contains("terms-conditions") but this doesn't seem to work. Any pointers would be appreciated, thanks so much :)
Edit: I need to check that the actual specific contents of this links is present, rather than the text 'Terms and conditions'
You should check the value of href attribute. You can use Attribute Contains Selector [name*=”value”] which select elements that have the specified attribute with a value containing a given substring:
The following should work:
if($('a[href*=terms-conditions]').length){
//exist
}
OR: Check the link string directly
if($('a:contains("Terms and conditions")').length){
//exist
}
I would look at doing this with Javascript, as it's very straightforward and means you are not reliant on JQuery should you wish to remove JQuery from the site at a later date.
// get <a> elements
var links = document.getElementsByTagName('a');
// loop through each <a>
for (var i = 0; i < links.length; i++) {
// get each href
var hrefs = links[i].getAttribute("href");
// check href against the one you want
if (hrefs == "https://www.google.com") {
// check content of link
console.log('link content:', links[i].innerHTML)
}
}

Insert current URL into a link using JS and HTML

So, Ive read through similar things but I still can't find an answer that applies more closely to what I'm doing. I am attempting to use JS to get the current page URL and append it to a social media sharing link like this:
<a href="http://reddit.com/submit?url=CURRENTPAGE.html; title="This is a post!" target="_blank">
Using Javascript, I've managed to assign the current URL to a variable:
<script>
var x = window.location.href;
document.getElementById("smsharing").innerHTML = x;
</script></p>
And I made sure it worked by doing a test display of it. So what exactly is the proper method/syntax for actually putting 'x' in place of CURRENTPAGE.html???
I know this is a STUPID question, but I'm really stumped. Specifics help, because part of the problem is that I have precious little knowledge of JS. Thoughts?
This should do it:
<script>
baseurl="http://www.facebook.com?"
function buildURL(item)
{
item.href=baseurl+window.location.href;
return true;
}
</script>
</head>
<body>
<a onclick="return buildURL(this)" href="">Google</a>
</body>
Get the elements current href which doesn't have the url value and append the current url.
Modified HTML
<a id='smsharing'
href="http://reddit.com/submit?url="
title="This is a post!"
target="_blank">link</a>
Script
<script>
var x = window.location.href;
var link = document.getElementById("smsharing"); // store the element
var curHref = link.getAttribute('href'); // get its current href value
link.setAttribute('href', curHref + x);
</script>
Using just pure JavaScript you can set the href of the link by just having the base href as a string and then add the variable where ever it is needed.
var x = window.location.href;
document.getElementById("linkid").href = "http://reddit.com/submit?url="+encodeURIComponent(x);
Using jQuery it is as simple as:
$('a').attr("href",x);
You should simply replace innerHTML by href :
document.getElementById("smsharing").href = x;
Hope this helps.
Once you have access to the current URL, you then want to find the element and replace CURRENTPAGE.html. To do so, you'll need some way to select the element. Let's give it an ID:
<a id="myLink" href="http://reddit.com/submit?url=CURRENTPAGE.html"></a>
Now we can grab the link like so:
var link = document.getElement('myLink');
Let's get the URL again, and give it a better variable name:
var url = window.location.href;
Now let's update the HREF attribute of link:
link.href = link.href.replace('CURRENTPAGE.html', url);
And that's it!
Create another variable for the complete href attribute of your link:
var myURL = "http://reddit.com/submit?url=" + x;
Then replace the current href attribute with that variable:
docment.getElementById("YourLinkTagID").href = myURL

make hyperlink from javascript

I want to use a hyperlink string in HTML page which I want to declare source link (URL) in my js file. Please tell me how can I call that URL from my js into html.
Thanks
There are a number of different ways to do this. You could use document.createElement() to create a link element, and then inject the element into the DOM. Or you could use the .innerHTML property of an element that you already have on the page to insert the link using text. Or you could modify the "href" attribute of an existing link on the page. All of these are possibilities. Here is one example:
Creating/Inserting DOM Nodes with DOM Methods
var link = document.createElement('a');
link.textContent = 'Link Title';
link.href = 'http://your.domain.tld/some/path';
document.getElementById('where_to_insert').appendChild(link);
Assuming you have something like this in your HTML:
<span id="where_to_insert"></span>
Creating/Inserting DOM Content with innerHTML
And another example using innerHTML (which you should generally avoid using for security reasons, but which is valid to use in cases where you completely control the HTML being injected):
var where = document.getElementById('where_to_insert');
where.innerHTML = 'Link Title';
Updating the Attributes of a Named DOM Node
Lastly, there is the method that merely updates the href attribute of an existing link:
document.getElementById('link_to_update').href = 'http://your.domain.tld/path';
... this assumes you have something like the following in your HTML:
<a id="link_to_update" href="javascript:void(0)">Link Title</a>
Try this:
var alink = document.createElement("a");
alink.href = "http://www.google.com";
alink.text = "Test Link";
document.getElementsByTagName("body")[0].appendChild(alink)
From whatever I understand, You want to update href with JS variable.
You can use Jquery to achieve it.
try $("a").attr("href", js_variable)
Refer this for more details
How to change the href for a hyperlink using jQuery
It seems like you would be able to do something like this:
Using Javascript.
var col2= document.getElementById('id_Of_Control');
col2.innerHTML="<a href='page2.html?" + params + "'>Page 2</a>";
where col2 is another container control something like div,span, or any.
Using jQuery.
Here I will recommend you to Use jQuery. So you can be more dynamic.
$("#col2").append("Page 2");
OR
$("#col2").after("Page 2");
OR
$("#col2").before("Page 2");

Make links in a specific div open in new tab

I want to open links in my post on a new page or a new tab rather. But only the link in the specific division, not all the links on my page. I don't wanna put _blank in all my tags it's too time consuming. How can I do that?
Thanks in advance.
With jQuery, you could set the target to _blank for all your links. E.g.
$(function(){
$("#myDiv a").attr("target","_blank");
});
Example on jsFiddle.
You really ought to put them in. If it's too time-consuming, try using a simple regex to do it for you (only run it on the html you care about). Replace:
(<a href[^>]*)(>)
with
$1 target="_blank"$2
If you really need to, you can use JavaScript, but it won't work where javascript is disabled. It's really a terrible solution for this problem:
var el = document.getElementById('myDiv'); // or some other way of making `el` point to your element
var links = el.getElementsByTagName('a');
for( var i = 0; i < links.length; i++ )
{
links.target = '_blank';
}
Here is a link to the Javascript that I use to set all the links within a certain div (or all links which are labeled with a certain class) to open in a new window: http://icode4you.net/use-javascript-to-open-all-links-within-a-certain-div-in-a-new-window.
I originally found this script at http://www.dynamicdrive.com/dynamicindex8/newwindow3.htm

YUI Button apply by class name

Is it possible to apply / create a YUI Button by using an element's class name and not by id. I have to generate a list of buttons then transform it to a YUI button.
[Update]
By the way, I'm trying to apply the button in an anchor tag. So it will be a link button.
[Update:Code]
Ok so here's the code. I have a loop that generates this anchor tag.
<a class="system-button" href="/system/edit/12">Edit</a>
wrumsby's answer perfectly makes sense. But I don't know why it doesn't work. I tried debugging it and the elements are successfully fetched. But it seems that no YUI Buttons are created.
I even tried generating unique ids for the elements but still no luck.
Any ideas?
Looks like I've solved it myself. But I'm not sure if this is the best solution. I generated unique ids then create the buttons.
var i = 0;
$(".system-button").each(function(i,b){
var button = new YAHOO.widget.Button($(b).attr('id','system-button'+i).attr('id'));
i++;
});
And oh yes, I use JQuery here. That framework is so awesome.
You should be able to use the srcelement configuration attribute like so:
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
Button = YAHOO.widget.Button;
Event.onDOMReady(
function() {
var elements = Dom.getElementsByClassName('...');
for (var i = 0; i < elements.length; i++) {
var button = new Button({
srcelement: elements[i],
...
});
...
}
}
);
})();

Categories