Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

An Essay on Auto-Converting Titles to Paths like Wordpress

When we create apps like blogs, articles or news we often need to generate a nice, SEO-style path for the details page, which should contain the title. This looks easy - I spent over a day on this simple challenge, and would like to share what I worked out…

Here's a super-short video explaining why this is important…

So basically the challenge is converting all kinds of titles to paths. Just replacing bad characters doesn't come close to delivering a useful solution. Let's look at some common issues:

  1. Umlauts - just killing them wouldn't be good as the word would get mangled - like "große Küchengeräte" which should result in a url like "grosse-kuechengeraete"
  2. Multiple "bad" characters, like "We +/- love this" would result in something like "We-----love-this"
  3. Leading / trailing spaces or special characters like "Learn Grunt (200)" should NOT result in "Learn-Grunt-200-"
  4. …especially in combination with path-characters (if you allow them) like "catalog/-best-mixer-ever"

I needed to get this worked out, because 2sxc 8.3.5 provides a new input-field called "string-url-path" which will auto-fill from one or more other fields. So the designer can specify it to fill from "[Title]" or more advanced cases like "[Category]/[Title]" and everything else must just happen.

If you're interested in the code, check out the JavaScript code on Github. But here's a short explanation to what I did:

  1. Before even starting, get the fields like Category, Title and remove slashes inside each. Reason is that the final result may have slashes (because category/name can have a slash), but if an inner piece also had a slash, this could cause trouble.
  2. Merge the result based on the mask (like [Category]/[Title]
  3. Lowercase everything
  4. Latinize everything - I created an Angular-Service which does this for me, converting around 1000+ "bad" characters like "áűőú" or "ǽ" to simpler characters. If you want to use it, you can find my AngularJS latinize-text-service here
  5. Neutralize apostrophe-s combinations like "Daniel's cat" to "Daniels cat" because I don't want it to end up as "daniel-s-cat" in the URL, but I also don't want to capture "she said 'super'" just because we have apos-s in a normal content
  6. Rotate all bad slashes \ to /
  7. Replace all unwanted characters including spaces with "-"
  8. Remove duplicate "-" and duplicate "/" in case they were created by previous conversions
  9. Replace all "-" and "/" side-by-side variations as they can easily be generated by previous conversions with simpler "/". This is to catch things like "(beta) Learn Gulp (200)" from resulting in a "blog/-beta-learn-gulp-200-" url
  10. And finally trim leading and trailing "-" characters

Usually you want to do this in JavaScript, because you want the UI to show the result immediately, and potentially allow the user to overwrite the resulting URL, ideally also trapping his input and preventing him from adding bad stuff. So feel free to use my code. Suggestions are also welcome.

Love from Switzerland,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?