Question 217686 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to replace element's attr href with each

I want to change the href URL from the HTML string.

But it prints the old URL instead of the test.php

var html='<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

$(html).find('a').each(function(){
    var newUrl = "test.php";
    $(this).attr("href", newUrl);
});
console.log(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

OUTPUT:
<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>

It prints the same URL it’s not changing to the new URL test.php

EXPECTED OUTPUT:
<div><a href="test.php">find out how</a></div>

Tags:

3

Answers


  1. 0

    The issue you are facing is that you are modifying the HTML string html, but you are not updating the original HTML content of the element. When you use $(html), it creates a new jQuery object with the HTML string, but the changes you make with .attr() are not affecting the original html variable.

    To achieve the expected output, you need to modify the html variable directly by updating the href attribute before converting it to a jQuery object. Here’s how you can do it:

    var html = '<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

// Convert the HTML string to a jQuery object
var $html = $(html);

// Use .each() to loop through each <a> element and update its href attribute
$html.find('a').each(function() {
  var newUrl = "test.php";
  $(this).attr("href", newUrl);
});

// Convert the updated jQuery object back to an HTML string
var updatedHtml = $html.prop('outerHTML');

console.log(updatedHtml);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Now, updatedHtml will contain the expected output:

    <div><a href="test.php">find out how</a></div>

    By updating the jQuery object and then converting it back to an HTML string, you retain the changes made to the href attribute.

    Login or Signup to reply.
  2. 0

    Use replace to change URL.

    Example:

    var html = '<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

$(html).find('a').each(function(i, ...v) {
  var Url = $(this).attr('href');
  var newUrl = "test.php";
  html = html.replace(Url, newUrl);
});
console.log(html);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
  3. 0

    you can use this if you want to apply it on HTML:

    $('div').find('a').each(function(){
    var newUrl = "test.php";
    $(this).attr("href", newUrl);
    var URL = $(this).attr("href");
    $(this).text("find out how -> "+URL);
});
    <script data-cfasync="false" type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>
<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search