We Keep Coding

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

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

jQuery: Add Class Active to <a> with current page href

I am looking for a way to add an active class to the tag that has an href of the current page.
Say I am on the page localhost:3000/inbox, I need my html to change add the correct class to the correct which are all located in the div with the class sidebar.
So when at "/inbox" jQuery should make my html look like this:
<div class="sidebar">
<a href="/link">
<i class="fa fa-inbox"></i>
<span>A Link</span>
</a>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</div>
This is what I tried, but it doesn't work, it breaks the code:
var href = $(location).attr('href');
('.sidebar').find('a[href*=href]').addClass("active");
Thank you. Please let me know if I wasn't clear enough.

It looks like you're almost doing it right, with the minor mistake of forgetting to call jQuery or $. You also need to concatenate your selector, so that the value of href is searched for.
$('.sidebar').find('a[href*="' + href + '"]').addClass('active');
You probably also need to find just the path name to match your href values, like so:
var href = window.location.pathname;

How about this?
var path = window.location.pathname;
$(".sidebar a[href*='"+path+"']").addClass("active");
Please note the ' around the path. They are there because jQuery cause syntax error if there are unquoted / in the selector.
When I try it on JSFiddle, I get a / at the end of the path. You might want to add that to your links, or you can remove it from the path variable like this:
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
Then some browsers might not include the leading / (or at least I think so), so you might want to add it in case it isn't already there:
if(path.charAt(0) != "/")
path = "/" + path;
Since you use *= you might match more than the current page. For instance, if you are on /inbox/ you will also add the class to links to /inbox/sub/folder. To avoid this, use = instead.
Taken together, you would get this:
var path = window.location.pathname;
if(path.charAt(path.length-1) == "/")
path = path.substring(0, path.length - 1);
if(path.charAt(0) != "/")
path = "/" + path;
$(".sidebar a[href='"+path+"']").addClass("active");
Here is a working JSFiddle. (You might need to press run to make it work, as the URL is different the first time the page load.)

As far as I understand your question you want to change all divs that have a href of '/inbox' to have the class "active"
Your code should therefore look like this
$(document).ready(function(){
$(.sidebar a[href=='/inbox']){
$(a[href=='/inbox').addClass('active');
}
}

How to provide different URLs for two clickable elements on the same page?

I have two clickable elements in HTML like this:
HTML
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
They belong to the page with url say:
http://foobar/examples.html
They have onclick listeners attached to them that retrieve some data from the server and display it on the webpage
Javascript
node1.click(function () {/*Displays table1*/})
node2.click(function () {/*Displays table2*/})
I want to change the URL for the two clicks just so that if I open the URL in a fresh tab, I get the node element clicked and the data visible. For example, conceptually, the following URL should point to the node1 clicked and data for it visible:
http://foobar/examples.html##fileName1 (does not work, but you get the idea)
I do not want to change the URL in accordance with what has been explained here as I do not want to create an HTML page for every fileName (it is an increasing list). Anchors don't help either as they just open http://foobar/examples.html and none of the nodes clicked . Neither is the answer to this question very clear to me. Can someone please help?

The first link you gave for changing the URL is what you want. However, you don't change the HTML page - you can add URL variables. For example:
http://www.example.com/mypage.html?node1=1&node2=1
Then you need to write a Javascript function at the top of your document to read the URL variables, and display the nodes that are set to 1 (or whatever value you choose) when the document has been loaded. For an example of how to read URL variables, see this answer.

You could give your nodes identifiers, like:
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
You would need to adjust the file names to be valid IDs.
Add the following JS:
var nodeId= window.location.hash;
$(nodeId).click();
You could then use:
http://foobar/examples.html#fileName1 (where fileName1 is adjusted as for IDs).

Highlighting current link

Hi I have to use only html and javascript. I have created one single page which contains a top navigation links the url for those links are something like:
domain.com,
domain.com/b1,
domain.com/b2
how do I highlight the current link.

If I understend question you may try html-attribute style for link tag:
<a style="color: red">link</a>
OR edit CSS-file for that link.
You can set class with serverside and define this class into CSS.
If coding only JS see for JS-object window.location.

You'll need to use a simple JS script to check the href of the link and compare it to the window.location.href (the current URL).
Here's a simple example using JQuery:
var currentUrl = window.location.href;
$('a').each(function(index) {
var url = $(this).attr("href");
if (url === currentUrl) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
Here it adds a class current to the link if it is the current link. I have a demo here on JSFiddle.

Using jquery
$('a[href="' + window.location.pathname + '"]').addClass('highlight');
replace pathname by one property (or a combination of properties) of the location object if it's not the good one.
the snippet add 'highlight' class to the link with the specified href, then you can write some css to highlight your link.

How to get "raw" href contents in JavaScript

I am trying to write a GreaseMonkey script in which I want to find all of the links that are relative links. It seemed to me that the way to do that would be to match the contents of href against /^https?:///.
But I find that when I access the anchor's href attribute, it's always normalized or cooked into a form that contains "http". That is, if the HTML contains:
<a id="rel" href="/relative/link">inner</a>
accessing
document.getElementById("rel").href
returns
http://example.com/relative/link
How can I access the raw data in the href attribute?
Alternately, is there a better way to find relative links?

Try the getAttribute method instead.

Typical. I figured it out myself almost immediately after posting the question.
instead of:
anchor.href
use:
anchor.getAttribute("href")
Of course, it took me longer to type in this answer than it took everyone else to answer it. (Damn, you people are fast.)

Here's a code snippet you could run to test.
const anchors = document.getElementsByTagName('a');
for (let anchor of anchors) {
let hrefFullPath = anchor.href;
let hrefRelativePath = anchor.attributes.href.value;
console.log('hrefFullPath', hrefFullPath);
console.log('hrefRelativePath', hrefRelativePath);
}
Let's say, you are at http://localhost:4200, and this is your document as you have shown in the question.
<a id="rel" href="/relative/link">inner</a>
This anchor's attribute value of href is:
document.getElementById('rel').attributes.href.value => /relative/link
And anchor's href value is:
document.getElementById('rel').href => http://localhost:4200/relative/link
I hope it helps.

Get the link dom and add attributes for same and append the actual link to same.
var hrefUrl = 'https://www.google.com/';
const link: HTMLLinkElement = dom?.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('id', 'seo');
dom?.head?.appendChild(link);
dom?.getElementById('seo')?.setAttribute('href', hrefUrl);
// working
Hope this will work for dynamic links that to append for each dynamic pages under js / ts.