Make Url friendly from string

Question

For example I have this string:

make no@ sen# `se !

I would to generate url like this

make-no-sen-se!

I have this:

    var value = $('.titleVal').val();
    if (value != '') {
        value = value.replace(/[^a-z0-9 _-]/gi, '-').toLowerCase();

        value = value.split(' ');
        var result = '';

        for (var i = 0; i < value.length; i++) {
            if ((value.length - 1) == i) {
                result += value[i];
            } else {
                result += value[i] + '-';
            }
        }
        $('#vidUrl').val(result);
    }

But it generate this:

make-no--sen---se--

Maybe just follow that with a regex that collapses multiples of - to just one. — isherwood
– isherwood, Commented Mar 11, 2014 at 14:52

Arie Xiao · Accepted Answer · 2014-03-11 15:05:15Z

6

Use the + or * to represent repeated occurance of a set.

function process(value) {
    return value == undefined ? '' : value.replace(/[^a-z0-9_]+/gi, '-').replace(/^-|-$/g, '').toLowerCase();
}

var result = process($('.titleVal').val());
$('#vidUrl').val(result);

answered Mar 11, 2014 at 15:05

Arie Xiao

14.1k3 gold badges35 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:21:46Z

4

value = value.replace(/[^a-z0-9 _-]/gi, '-').toLowerCase();

should probably be

value = encodeURIComponent(value.toLowerCase().replace(/[^a-z0-9 _-]+/gi, '-'));

Calling toLowerCase before doing the replace will make sure that Latin upper-case letters are not replaced with dashes.

The '+' after the character set will convert sequences of multiple characters like '@ ' to a single dash.

The encodeURIComponent call will ensure that the result is safe to include in a URL path component.

You might also want to look into expanding the set of letters and digits that you do not replace with dashes so that the result is more friendly to non-Western-European users.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Mar 11, 2014 at 15:04

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

ramazandonmez · Accepted Answer · 2014-03-11 15:06:18Z

1

try this:

var value = "-make no@ sen# `se !";
if (value != "") {
    value = value.replace(/[^a-z0-9]/g, '-')
                 .replace(/\-{2,}/g, '-')
                 .toLowerCase();
    if(value.indexOf("-", 1) != -1)
        value = value.substring(1);

    if(value.indexOf("-", value.length -1) != -1)
        value = value.substring(0,value.length - 1);

    console.log(value);
}

answered Mar 11, 2014 at 15:06

ramazandonmez

412 bronze badges

Collectives™ on Stack Overflow

Make Url friendly from string

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related