Get Word from href using jQuery

Question

Heyo,

so I got a script that turns normal anchor href's into id hrefs (for example: /10001-Link1 to #Link1). Now this works fine as long as you repeat the code for every single anchor link you want to turn into a id link. But I want to make it less static. So that instead of repeating the code for every single anchor link the script should get the correct word out of the current anchor href automaticly and just replaces the word with the rest of the url and puts a # before it.

So here is the code that works only for the first URL:

$(document).ready(function() {
 $('li a').each(function(){ 
  var oldUrl = $(this).attr("href");
  var newUrl = oldUrl.replace("/10001-Link1", "#Link1");
  $(this).attr("href", newUrl);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

Now I alredy searched for a solution for this Problem. But the only thing I found was a line of code I couldn't really understand.

$('a[href^="http://stackoverflow.com"]')
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         'http://stackoverflow.com');
   });

I get the first part were every href that starts with http://stackoverflow.com is getting a .each function. But I don't know what all the /'s and \'s by the .replace part do and mean. Maybe this is not even the right solution for my problem at all?

Mark Baijens · Accepted Answer · 2018-12-28T10:25:41.087

3

You can use a regex for that.

.replace(/\/[0-9]{5}-/, ""); replaces the regex match with an empty string. Just add a # in front of it and you got the desired result.

The regex works as followed:

\/ looks for a / (need to be escaped).
[0-9]{5} looks for 5 numbers.
- looks for (you never believe it) a -.

$(document).ready(function() {
 $('li a').each(function(){ 
  var oldUrl = $(this).attr("href");
  var newUrl = "#" + oldUrl.replace(/\/[0-9]{5}-/, "");
  $(this).attr("href", newUrl);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

edited Dec 28 '18 at 10:25

answered Dec 28 '18 at 10:20

Mark Baijens

13,028
11
47
73

That worked perfektly ... the only thing im still not understanding is how these / and \ work ... how is this even called ... is there any tutorial were i can read about that? – Pelle2010 Dec 28 '18 at 10:23
@MarkBaijens no worries :D I didn't downvote so I won't remove it ;) but I'll add an upvote for yas:p – treyBake Dec 28 '18 at 10:24
@Pelle2010, I edited in an explination. If you have more questions about it feel free to ask. – Mark Baijens Dec 28 '18 at 10:27
1

@MarkBaijens alright ... now i understand much more ... thank you! – Pelle2010 Dec 28 '18 at 10:31

score 1 · Answer 2 · answered Dec 28 '18 at 10:31

You can use lookbehind assertion (which should have a decent support):

var newUrl = oldUrl.match(/((?<=-)).*$/)[0]

this will retrieve anything after the -,
then you can use the variable to compose the new href.

$(document).ready(function() {
 $('li a').each(function(){ 
  var oldUrl = $(this).attr("href");
        var newUrl = '#' + oldUrl.match(/((?<=-)).*$/)[0]
  $(this).attr("href", newUrl);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

score 0 · Answer 3 · answered Dec 28 '18 at 10:27

0

you can do something like this:

$(document).ready(function () {
    $('li a').each(function () {
        var url = this.href;
        url = url.split('-')[1];
        this.href = this.href.replace(this.href, "#" + url);
    });
});

answered Dec 28 '18 at 10:27

ecstatic

114
1
9

You should add an explanation to help OP understand the problem/solution - code only answers aren't answers IMO :) – treyBake Dec 28 '18 at 10:28

Yosvel Quintero · Answer 4 · 2018-12-28T22:49:32.540

You can do it using the regular expression /\/\d{0,5}-(.*)$/ that means: from the /, 5-digit digits and - to the end of the string..

Code:

$('li a').each(function () {
  this.href = '#' + this.href.match(/\/\d{0,5}-(.*)$/).pop();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

Get Word from href using jQuery

4 Answers4