Using jQuery I need to replace spaces inside href with hyphens

Question

I have a list of links that direct to a page which corresponds to each of the 50 states in the US.

I am looping through each states in an array and adding it the href for each but for states that contain two words I need to replaces the space (' ') between them with a hyphen('-').

example: New York must be replaced with New-York.

<a href="http://www.projectknow.com/find/New York/" class="spaces">

MUST BE REPLACED WITH

<a href="http://www.projectknow.com/find/New-York/" class="spaces">

This is what I got so far but it does NOT work. Still new to jQuery and any help would be greatly appreciated.

var option = '';
for (var i = 0; i < states.length;i++){
    option += '<li><a href="http://www.states.com/find/'+ states[i] +'/" 
    class="spaces">'+ states[i] +'</a></li>';
}

$('.menu').append(option);

$("a.spaces").each(function (){
    $(this).attr('href', $(this).attr("href").replace("","-"));
});

Your string does not contain a space. Furthermore, in JS, replace doesn't replace all instances of the search string unless the search argument is a regular expression, you'll need to implement something like so: https://stackoverflow.com/a/2116614 — random_user_name, Jun 07 '17 at 00:16
Why change the states[i] after the fact? Why not change it as you build the links? — Taplar, Jun 07 '17 at 00:18

Tom el Safadi · Answer 1 · 2017-06-07T00:16:34.327

2

Use this code instead:

$(this).attr('href', $(this).attr("href").replace(/\s/g, "-");

edited Jun 07 '17 at 00:16

answered Jun 07 '17 at 00:11

Tom el Safadi

6,164
5
49
102

2

Why not do this replace as you are building the links, not after the fact? – Taplar Jun 07 '17 at 00:19

Lai32290 · Answer 2 · 2017-06-07T00:25:54.860

1

Maybe you can replace it before add it to a link tag then you don't need to handle it after added, like this way:

var option = '';
for (var i = 0; i < states.length;i++){
   var state = states[i].replace(/ /g, '-');
   option += '<li><a href="http://www.states.com/find/'+ state +'/" class="spaces">'+ states[i] +'</a></li>';
}

edited Jun 07 '17 at 00:25

answered Jun 07 '17 at 00:25

Lai32290

8,062
19
65
99

score 1 · Answer 3 · answered Jun 07 '17 at 00:27

var states = [ 'New York', 'New Jersey', 'New Mexico' ];

$('.menu').append(states.map(function(state){
  return '<li><a href="http://www.states.com/find/'+ state.replace(/[ ]/g, '-') +'/" class="spaces">'+ state +'</a></li>';
}).join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu"></ul>

Josh Brody · Answer 4 · 2017-06-07T00:18:39.933

0

You're so close!

Problem:

$(this).attr('href', $(this).attr("href").replace("","-"));

because "" != " "

Answer:

$(this).attr('href', $(this).attr("href").replace(" ","-"));

but replace only replaces the first occurrence. We could suggest regex, but as you stated you're still trying to figure things out; regex would just confuse you at this time

function replaceAll(str, find, replace) { 
  str = str.replace(find, replace);
  if(str.indexOf(find) > -1) { 
    return replaceAll(str, find, replace);
  } 
  return str;
}

and then $(this).attr('href', replaceAll($(this).attr('href'), ' ', '+'));

edited Jun 07 '17 at 00:18

answered Jun 07 '17 at 00:09

Josh Brody

5,153
1
14
25

Not quite. [string.replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) used this way only replaces the first instance. What if there are more than one space? – random_user_name Jun 07 '17 at 00:11

Using jQuery I need to replace spaces inside href with hyphens

4 Answers4