Html Question posted in
Some basic documentation can be found here.

Html – JavaScript code to change href if contains a link

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.

<script>
        window.onload = function() {
        var anchors = document.getElementsByClassName("elementor-button");
        for (var i = 0; i < anchors.length; i++) {
        anchors[i].href = "https://google.com"
        }
        }
</script>
Tags:

3

Answers


  1. 0

    Add validation based on your constraints & replace the href accordingly.

    if (href && href.includes(".")):

    • This condition ensures two things:
      • href exists (Checks whether the button has a valid href attribute).
      • href.includes("."): The href contains a period (.), which is typical in URLs or replace this with your actual constraints.

    if both conditions are met, then the script replace the href with "https://google.com&quot; or any url.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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&quot;.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search