Jquery — Regex a URL slug into a capitalized sentence?

Question

Hi there I'm trying to figure out how to convert

this-is-my-slug

to:

This Is My Slug

in Jquery?!

I know PHP is awesome with this, but jQuery maybe not?

Do you need the final text to actually be capitalized or just display as capitalized on the webpage? — Munzilla, Mar 23 '11 at 16:56

Rion Williams · Answer 1 · 2011-04-04T13:55:34.110

2

This should do it for you: (This was a simple previous example)

var str = "this-is-my-slug";
str = str.toLowerCase().replace(/-/,' ').replace(/\b[a-z]/g, convert);
    function convert() {
          return arguments[0].toUpperCase();
    }

Here it is in function form - the entire word and single word conversions:

   //Converts and Formats entire string
   function Convert(test)
   {
       var formatted = test.toLowerCase().replace(/-/g,' ');
       var array = test.split(" ");
       var output = "";

       for (i=0;i<array.length;i++)
       {
              output += ConvertString(array[i]);
       }  
       return output;
    }

   //Formats individual words
   function ConvertString(string)
   {
       var str = string;
       str = str.toLowerCase().replace(/-/g,' ').replace(/\b[a-z]/g, convert);
       function convert() {
          return arguments[0].toUpperCase();
       }
       return str; 
   }

Working Example - Updated

edited Apr 04 '11 at 13:55

answered Mar 23 '11 at 16:56

Rion Williams

74,820
37
200
327

No Problem - Hope it helped :) – Rion Williams Mar 23 '11 at 17:06
Hmm just noticing one issue, it only replaces the first -, second third nth stay there. Guess I need to add a each() in there? – RGBK Mar 23 '11 at 17:09
Oops I forgot the split - one sec :) – Rion Williams Mar 23 '11 at 17:12
Actually, hmm, I'm trying this out again (in the jsfiddle) it doesn't work? I'm trying to figure out why but it's a bit beyond me, i'll keep trying though. Just to double check... my-dashed-string should output as My Dashed String, currently it's outputting My Dashed-String – RGBK Apr 04 '11 at 11:47
It should all work now, i noticed an issue that I had forgotten the 'g' in the regular expressions (to indicate a global replace rather than just the first instance). Give it a shot now :) – Rion Williams Apr 04 '11 at 13:56

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Comparing jQuery with PHP isn't a particularly fair comparison but rather than get into that I'll just direct you towards this question. It's doing the opposite operation but you might get some help with your issue from it.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 23 '11 at 16:58

Malice

3,927
1
36
52

You're right it's not a fair comparison. And I love jQuery :-) – RGBK Mar 23 '11 at 16:59

score 0 · Accepted Answer · answered Apr 04 '11 at 12:19

OK, this works 100%:

http://jsfiddle.net/Y9WQC/1/

var string = "this-is-a-slug";

convert = string.replace(/-/g," ");

function ucwords (str) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Waldo Malqui Silva
    // +   bugfixed by: Onno Marsman
    // +   improved by: Robin
    // +      input by: James (http://www.james-bell.co.uk/)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // *     example 1: ucwords('kevin van  zonneveld');
    // *     returns 1: 'Kevin Van  Zonneveld'
    // *     example 2: ucwords('HELLO WORLD');
    // *     returns 2: 'HELLO WORLD'
    return (str + '').replace(/^([a-z])|\s+([a-z])/g, function ($1) {
        return $1.toUpperCase();
    });
}
var result = ucwords(convert)
$("div").text(result); 

<div>my new string will output here</div>

Jquery — Regex a URL slug into a capitalized sentence?

3 Answers3