Using TextWrangler to Generate HTML Form Option Values from a Text List

Standard

While working on a project I needed to find a way to take a text-based list of values and convert them to drop-down options for an HTML form.

For example, I a have list in a text file like this:

One
Two
Three
Four

I need to convert them to this:

<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>

The items above would then be enclosed within a SELECT tag.

For a list this short I would just code it by hand but when you start hitting lists of 25 or more options it quickly becomes time-consuming. I attempted to use a Find and Replace operation in Dreamweaver using RegEx but ran into a problem.

Eventually, I moved over to TextWrangler for Mac. I’m not a RegEx guru but after doing some reading I came up with a method that works well.

In TextWrangler I opened the file and then went to the Search menu option and clicked Find.

Here’s what I’m using:

Find: ^(.*)$
Replace: <option value="\1">\1</option>

Also, and this is critical, I checked the option to use “Grep” under Matching. This enables the use of Regular Expressions.

The find pattern captures anything between the beginning and end of the line. In the replace section it takes whatever matches and then inserts it into the surrounding text (\1 instructs the software to insert the contents of the match).

Here’s a screenshot of the dialog:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.