I want to create a script that changes the href of a button only if it contains a link or a period, since URLs normally contain periods (if it contains a link, I want to replace it with another one, for example google.com). However, the script I have changes all hrefs regardless of their content.
window.onload = function() {
var anchors = document.getElementsByClassName("elementor-button");
for (var i = 0; i < anchors.length; i++) {
anchors[i].href = "https://google.com"
}
}
5
You can use string.includes()
to see if the href
includes a dot.
Below is the final code, however, as the href
on an anchor in an SO snippet has the default domain of SO, it doesn’t work correctly in the snippet – demonstrational snippet is below.
window.onload = function() {
var anchors = document.getElementsByClassName("elementor-button");
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].href.includes(".")) {
anchors[i].href = "https://google.com"
}
}
}
<a href="#internal-link" class="elementor-button">Internal link</a>
<a href="stackoverflow.com" class="elementor-button">External link</a>
Demonstrational snippet
window.onload = function() {
var anchors = document.getElementsByClassName("elementor-button");
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].getAttribute("data-href").includes(".")) {
console.log(anchors[i].text + " has dot")
}
}
}
<a data-href="#internal-link" class="elementor-button">Internal link</a>
<a data-href="stackoverflow.com" class="elementor-button">External link</a>
Script that only changes the href if it already contains a dot, which is common in URLs
<script>
window.onload = function() {
var anchors = document.getElementsByClassName("elementor-button");
for (var i = 0; i < anchors.length; i++) {
var href = anchors[i].href;
if (href.includes(".")) {
anchors[i].href = "https://google.com";
}
}
}
</script>
- includes(“.”) method checks if the href contains a dot.
- Only if the dot is present, the href is updated to “https://google.com”.
You want to check if the href contains an external website URL.
There are 2 solutions.
For the first one, you suggested checking if the href contains (.).
I added to your suggestion to check if it also contains (‘https’ OR ‘http’).
let’s see the code and explain it.
window.onload = function() {
var anchors = document.querySelectorAll(".elementor-button");
anchors.forEach(element=>{
var href = element.getAttribute('href');
var valid = href.includes('https://') || href.includes('http://') || href.includes('.') ?true:false;
if(valid){
element.href = 'https://google.com';
}
});
}
<a class="elementor-button" href="/">stackoverflow</a>
<a class="elementor-button" href="http://github.com">Github</a>
<a class="elementor-button" href="#section-ID">internal</a>
- I changed the document element selector from ‘getElementsByClassName’ to ‘querySelectorAll’.
querySelectorAll is more versatile and preferred due to its ability to handle more complex selectors and its static nature, which often aligns better with modern JavaScript development practices.
- Then I start to loop on the anchors using ForEach
- I preferred to get the ‘href’ as an attribute value
.getAttribute(‘href’) returns the URL as it was specified in the HTML, whether it’s absolute or relative. e.g. #section-ID
.href returns the URL resolved to its absolute form if it was relative. e.g. https://stacksnippets.net/js#section-ID
- I created a variable that will hold a boolean value. will be true if the href is valid to be replaced and false if not. and it checks if the href contains (‘.’ OR ‘http://’ OR ‘https://’).
- if it’s valid to be replaced then I will replace the href with the URl you prefer. for example ‘https://google.com’.
And that’s all with this method.
We can make something else
If we want to check if the href is external, then We can check if the hostname of the href is not equal to our window hostname.
let’s see the code.
window.onload = function() {
var anchors = document.querySelectorAll(".elementor-button");
anchors.forEach(element=>{
if(element.hostname !== window.location.hostname){
element.href = 'https://google.com';
}
})
}
<a class="elementor-button" href="https://stackoverflow.com">stackoverflow</a>
<a class="elementor-button" href="http://github.com">Github</a>
<a class="elementor-button" href="#section-ID">internal</a>
That’s all the solutions in my mind if I understand your question right.