在一些链接中找到http协议并转换为https

Question

On my little code, I'm loading a script that changes the colors of links but I also want to replace the http where needed with https using some Regex but I'm facing an error with replace function in JS.

The Regex for JS would only replace to https:// when a string starts with http:// (case-insensitive), otherwise the original string is returned as is.

The code so far looks like in the snippet, the colors are changing for all the links but replace has issues.

Please let me know what's wrong with the code so far.

 window.onload = function() { // alert('Page loaded'); let url = document.querySelectorAll('.page-numbers'); console.log(url); url.forEach((e) => { e.style.color = 'red'; console.log(e); e.replace(/^http:\/\//i, 'https://'); }); };

 <div class="pagingSection"> <a href="http://www.example.com" class="page-numbers">Link 1</a> <a href="https://www.example.com" class="page-numbers">Link 2</a> <a href="http://www.example.com" class="page-numbers">Link 3</a> <a href="//www.example.com" class="page-numbers">Link 4</a> <a href="" class="page-numbers">Link 5</a> </div>

Answer 1

You have to edit the href property of the link:

Take a look at this snippet. I only modified the e.replace line.

 window.onload = function() { // alert('Page loaded'); let url = document.querySelectorAll('.page-numbers'); console.log(url); url.forEach((e) => { e.style.color = 'red'; console.log(e); e.href = e.href.replace(/^http:\/\//i, 'https://'); }); };

 <div class="pagingSection"> <a href="http://www.example.com" class="page-numbers">Link 1</a> <a href="https://www.example.com" class="page-numbers">Link 2</a> <a href="http://www.example.com" class="page-numbers">Link 3</a> <a href="//www.example.com" class="page-numbers">Link 4</a> <a href="" class="page-numbers">Link 5</a> </div>

Answer 2

In JS if you have to edit an attribute of an HTML element you should use setAttribute .

Also you are getting an error because the url variable is not an array of string, it's an array HTML element so it dont have a replace function, you should use e.href to read the url

 window.onload = function() { // alert('Page loaded'); let url = document.querySelectorAll('.page-numbers'); url.forEach((e) => { e.style.color = 'red'; e.setAttribute('href', e.href.replace(/^http:\/\//i, 'https://')); console.log(e); }); };

 <div class="pagingSection"> <a href="http://www.example.com" class="page-numbers">Link 1</a> <a href="https://www.example.com" class="page-numbers">Link 2</a> <a href="http://www.example.com" class="page-numbers">Link 3</a> <a href="//www.example.com" class="page-numbers">Link 4</a> <a href="" class="page-numbers">Link 5</a> </div>