How to replace element's attr href with each

Question

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>

`console.log(html);` - at this point `html` is still the *original* unchanged string. Change to `let newHtml = $(html)` - then your code using newHtml and `console.log(newHtml)` — freedomn-m, Jul 28 '23 at 07:55

score 1 · Answer 1 · edited Jul 28 '23 at 07:22

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.

4b0 · Accepted Answer · 2023-07-28T07:53:34.940

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>

edited Jul 28 '23 at 07:53

answered Jul 28 '23 at 07:28

4b0

21,981
30
95
142

1

This works as expected. Thank you. – Jeevanandam Jul 28 '23 at 07:46
Unless you know the source html is extremely basic, you should not use regex to change the html. See [this answer](https://stackoverflow.com/a/1732454/2181514) for reasons. – freedomn-m Jul 28 '23 at 07:58

score 0 · Answer 3 · answered Jul 28 '23 at 07:30

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>

How to replace element's attr href with each

3 Answers3