JavaScript string replace for post slug Aug22 '05

My own administration panel, for this blog, helps me insert new entries into my database.

On my "Add New Entry" form, I have many fields. Two important fields are headline and post slug. The headline is, obviously, the headline of the entry. The post slug is the name that appears in the permanent URL for the entry.

For example, if you look up to the address bar, in the browser, you’ll see the permanent URL, for this entry. You’ll notice a handful of useful information, such as the year, month, and day - but at the very end is the post slug. It’s basically the headline "crunched down."

In other words, the headline for this entry is JavaScript string replace for post slug. So, the post slug is therefore: javascript-string-replace-for-post-slug. Notice how the entire phrase is lower case. Also, all spaces have been removed, and replaced with a dash (-).

When I go to post a new entry, I don’t like to have to type things twice. So, after I enter the headline, I have some simple JavaScript automatically enter the post slug.

For example, try entering a headline in the text box below, and then click out of the box, and watch how the text is automatically copied over to the post slug field:

The HTML

In the headline field, in the HTML form, we have something similar to this:

<input type="text" name="headline" onBlur="headline_to_postslug('2005-08-21a', 'headline', 'post_slug')" />

Notice the onBlur attribute calls a function named headline_to_postslug, which is a JavaScript function that takes three parameters.

The JavaScript

It’s not perfect

Of course, it’s not perfect. The post slug can only contain letters, numbers, or dashes - but the headline might contain characters like double quotes ("), single quotes (‘ ’), parenthesis, commas (,), and much more.

Currently, the JavaScript function I created does not check for all those other characters. It simply checks for spaces.

And that’s OK. The majority of my headlines won’t contain all of those other characters - and I don’t mind if I have to edit the post slug field, in the case that those characters do exist, in the headline.

And, obviously, if we wanted, we could easily add some more JavaScript to make those other characters automatically disappear, too.

But, for now, we’ll just keep it simple.

Categories: JavaScript , Tutorials

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

I do that based on a php function so that clients don't need to have javascript going. Also it is a good idea to check input because the jav ... Read more.

Have you been getting any spam through your contact form? Ever since I added the security check, spa ... Read more.

document.fors.[...].elements is null or not an object ... Read more.

Thanks for this, I updated it to replace spaces with dashes and remove anything but alpha-numeric characters and dashes. Here's what it looks like. ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.