Javascript - Regex expression to remove special characters from title

Question

I'm attempting to remove special characters from my title and convert it to a url-schema. I'm able to accomplish this by using the .replace method such as: title.replace(/[^A-Za-z0-9\-/s]/g, " ");

I am running into problems when the title has parentheses in it. I am able to remove the parentheses but it then leaves an empty space at the end which then I am filling empty spaces with a - in order to create a URL schema, this is giving me some issues.

How can I adjust my code below in order to remove the parentheses around (Cat and Dog) in order to not leave a space behind?

This is what's currently happening with my current code: "Pet Supplies Cat and Dog "

let title = "Pet Supplies (Cat and Dog)"

let cleanTitle = ""

cleanTitle = title.replace(/[^A-Za-z0-9\-/s]/g, " ");
cleanTitle = cleanTitle.toLowerCase();
cleanTitle = cleanTitle.replace(new RegExp(" ", "g"), "-");
cleanTitle = cleanTitle.replace("-and", "");
cleanTitle = cleanTitle.replace(new RegExp("---", "g"), "--");
cleanTitle = cleanTitle.replace(new RegExp("--", "g"), "-");
    
console.log(cleanTitle)

My expected outcome is : pet-supplies-cat-dog

Hi sorry if my wording is not correct. What I meant with `url-schema` is that I will have an article title on my page that I will re-direct so I'm attempting to convert any titles into friendly URLs such as `Pet Supplies (Cat and Dog)` to `website.com/pet-supplies-cat-dog` — maimok, Sep 03 '20 at 16:32
I think what you want is called a `slug`. There is plenty of examples how to generate these using JavaScript e.g. https://stackoverflow.com/questions/1053902/how-to-convert-a-title-to-a-url-slug-in-jquery. — Christian, Sep 03 '20 at 16:35
You may just `trim` the string, `cleanTitle.toLowerCase();` => `cleanTitle.trim().toLowerCase();`. Also, did you mean to match whitespace with `/s`? It must be `\s`. — Wiktor Stribiżew, Sep 03 '20 at 16:48

score 1 · Accepted Answer · answered Sep 03 '20 at 16:55

You can use

let title = "Pet Supplies (Cat and Dog)"
title = title.toLowerCase()                   // Turn to lower
  .match(/[a-z0-9\s-]+/g)                     // Extract all alnum + hyphen and whitespace chunks
  .map(x => x.trim().split(/\s+/).join("-"))  // Trim the items, split with whitespace and join with a hyphen
  .join("-")                                  // Join the items with a hyphen
  .replace(/-and\b/g, '');                    // Remove whole word -and
console.log(title);

score 0 · Answer 2 · answered Sep 03 '20 at 16:39

There may be more elegant ways to do it, but you just want to remove special characters at the beginning and the end without adding a space character (or remove it after adding it). That can be done with two additional replacements:

let title = "Pet Supplies (Cat and Dog)"

let cleanTitle = ""

cleanTitle = title.replace(/[^A-Za-z0-9\-/s]/g, " ");
cleanTitle = cleanTitle.replace(/^ /g, "");
cleanTitle = cleanTitle.replace(/ $/g, "");

cleanTitle = cleanTitle.toLowerCase();
cleanTitle = cleanTitle.replace(new RegExp(" ", "g"), "-");
cleanTitle = cleanTitle.replace("-and", "");
cleanTitle = cleanTitle.replace(new RegExp("---", "g"), "--");
cleanTitle = cleanTitle.replace(new RegExp("--", "g"), "-");
    
console.log(cleanTitle)

score 0 · Answer 3 · answered Sep 03 '20 at 16:59

You can achieve your output in this way:

let title = "Pet Supplies (Cat and Dog)"

let cleanTitle = ""

cleanTitle = title.replace(/and/g,''); // removing all "and"
cleanTitle = cleanTitle.replace(/\s+/g, '-'); // replacing all spaces by "-"
cleanTitle = cleanTitle.replace(/([()])/g, ''); // removing all "()"
cleanTitle = cleanTitle.toLowerCase(); // converting to lowercases
    
console.log(cleanTitle)

Javascript - Regex expression to remove special characters from title

3 Answers3