Everyday Automation: Changing the Case of Text Within Code List Items

Coding a list of options such as a index of countries or cities in for use in an HTML form, in PHP for a query, or as variables that can be passed to JavaScript is a common task. Unfortunately what is also common is that sweeping changes must be made to the items in the list. A change like converting each country name from all caps into title case or vice versa may sound easy, and when working with prose, it is; doing that among a list of code items, however, can be a nightmare.

The problem is that, while a user sees a simple dropdown field with a list of names, the code to generate that field and list is much longer than merely the name of the country. It also often contains the country (or other variable) name twice, sometimes even three times or more. While all the instances of the country name can have their cases changed fairly easily using Microsoft Word, InCopy, and most other word processors. that action will also change the case of the code surrounding the variables. That is unacceptable because case matters in code. Sometimes it’s merely a matter of aesthetics—coders like to stick with a common capitalization and case scheme of all lowercase, all caps, or somewhere in between—but just as often the code in question will fail or do something unexpected if its written in a certain case. Thus it isn’t possible to pass an entire list of code-wrapped variables through a text case changer.

Here are snippets of the two lists we’ll work with. Both are snippets from lists of 202 countries each. The first set is coded to be a simple dropdown menu select field in an HTML quote or contact form while the second is the same list in truncated JavaScript for use in a travel app.

<option value="AUSTRIA">AUSTRIA</option>
<option value="AUSTRALIA">AUSTRALIA</option>
<option value="ARUBA">ARUBA</option>
<option value="AZERBAIJAN">AZERBAIJAN</option>
<option value="BARBADOS">BARBADOS</option>
<option value="BANGLADESH">BANGLADESH</option>
<option value="BELGIUM">BELGIUM</option>
<option value="BURKINA FASO">BURKINA FASO</option>

'AUSTRIA’,’url’:’http://wikitravel.org/en/Austria’, ‘target’:’new_window’,
'AUSTRALIA’,’url’:’http://wikitravel.org/en/Australia’, ‘target’:’new_window’,
'ARUBA’,’url’:’http://wikitravel.org/en/Aruba’, ‘target’:’new_window’,
'AZERBAIJAN’,’url’:’http://wikitravel.org/en/Azerbaijan’, ‘target’:’new_window’,
'BARBADOS’,’url’:’http://wikitravel.org/en/Barbados’, ‘target’:’new_window’,
'BANGLADESH’,’url’:’http://wikitravel.org/en/Bangladesh’, ‘target’:’new_window’,
'BELGIUM’,’url’:’http://wikitravel.org/en/Belgium’, ‘target’:’new_window’,
'BURKINA FASO’,’url’:’http://wikitravel.org/en/Burkina Faso’, ‘target’:’new_window’,

The goal is to convert those country names—both instances of each country name in 202 list items in either the HTML or JavaScript versions—from ALL CAPS to Title Case without altering the case of the surrounding code. Doing that by hand, retyping each one, would be labor intensive and error prone. It’s a bad idea. Instead, there’s a much easier, semi-automated way to make the change. To do that, each item must be expanded into its static and variable components.

Breaking It Down

The key is to look at the lines of code in the list and identify, and shortly set apart, the identical, repetitive bits of text from the variable portions.

Using color coding to separate code that must not be changed (in blue) from the variables whose case must be changed (in red), each HTML list item looks like the below.

<option value="AUSTRIA">AUSTRIA</option>

Similarly, each JavaScript list items would be color-coded as follows to constituent pieces.

'AUSTRIA’,’url’:’http://wikitravel.org/en/Austria’, ‘target’:’new_window’,

The only challenge is to physically separate those parts—the static from the variable—so that we can alter the variable text without touching the static text. That’s why we need Microsoft Word—any version, Windows or Mac.

[su_note note_color=“#deff96”]

NOTE

If you don’t have Word you use any other text or code editor with a search and replace function and a spreadsheet program like Google Docs or Apple Numbers (both free). Follow the same instructions below, adjusting for the your text or code editor.[/su_note]

Copy the entire list of items and paste it into a blank, new document in Microsoft Word.
Working left-to-right from the can of the line, copy the first static component in its entirety, inclusive of any punctuation, symbols, or spaces. Working with the HTML countries list as an example, that would be <option value=“.
Open Word’s Find and Replace utility.On Windows, depending on your version of Word, you’ll likely find Find and Replace on the Edit menu. You can also locate it by going to the Home tab and clicking on Replace in the Editing group. Perhaps the easiest way to open it is to simply press the Find and Replace keyboard shortcut CTRL+H.
Mac users will most easily access Find and Replace by pressing its keyboard command of CMD+Shift+F. Alternatively, selecting the poorly named menu command Edit > Find > Advanced Find and Replace will also open Find and Replace.

Figure 1: The Mac version of Find and Replace.

Switch to the Replace tab and paste into the Find What field first static text component you just copied.
Set the Replace With field to replace the static component with itself followed by a tab. Do that by entering the code ^&^t.
Click Replace All. If prompted to search further, answer in the affirmative. When the search and replace operation has finished the first static component will be separated from the first variable by a tab (turn on Show All Non-Printing Characters to see the tabs as in Figure 2).

Figure 2: After the first Find and Replace operation a tab stands between the first static and variable components.

Copy the second piece of static text, everything after the first variable and all the way up to the second variable. (If your code only contains a single variable per line, copy all the way to the end of the line.)
Switch back to Find and Replace, which can be left on screen while you copy from the page, and paste that second static component into the Find What field.
This time, in the Replace With field, Word must be told to put a tab before and after the Find What text. Do that by setting the Replace With field to this code: ^t^&^t. (If your code has only the one variable, use this Replace With code instead: ^t^&.)
Excute the replacement with Replace All. If your code contains additional variables, keep going, using the tab ^t code and Find What Text ^& code to insert tab between each static and variable component.
Perform Search and Replace one last time to insert a tab between the end of the last variable and any static code that follows it. Use ^t^& in the Replace With field. Afterward you should have code similar to mine in Figure 3.

Figure 3: Variables and static text are now separated from one another by tabs.

Isolating and Transforming the Variables in Word

Now that the two types of content within each list item are identified and set off from one another it’s time to make them separately selectable so that all the variables can be selected at once and transformed without altering any of the static code.

[su_note note_color=“#deff96”]

NOTE

If you aren’t using Microsoft Word, you can combine a spreadsheet application with the text or code editor you’ve used up until this point. Copy the tab-delinated text from your editor and paste it into a spreadsheet. Then follow the instructions below, using your spreadsheet application’s Change Case or text transformation features.[/su_note]

Select all the lines of code.
On the Insert ribbon tab click on Table and then Convert Text to Table (see Figure 4). In older, ribbon-free versions of Word the command can be found by going to Table > Convert > Convert Text to Table.

Figure 4: Choosing Convert Text to Table from the Insert tab on the ribbon.

When the Convert Text to Table dialog appears, make sure Separate Text At is set to Tabs and click OK (see Figure 5). Unless there was an error in the Search and Replace operations, or errors in the code to begin with, the code should show be separated into columns of static and columns of variable components as in Figure 6.

Figure 5: The Convert Text to Table dialog asks for the delineation marker to be used to separating text into columns.

Figure 6: Once converted, all variables and static code components will be in clean columns.

Return to the top of the table on the first page and hover your cursor just above the first variable column. When the cursor is in position, it will switch to a downward-facing arrow like the one in Figure 7. Click to select the entire column, across all pages.

Figure 7: Select a column of text by hovering the cursor near the top of the column and clicking when it becomes a downward-facing arrow.

Choose Format > Change Case to open the Change Case dialog box (see Figure 8).

Figure 8: The Change Case dialog offers five text transformation options.

Select Title Case, UPPERCASE, lowercase, tOGGLE cASE, or Sentence case, as your situation requires and then click OK. Text in the selected column—all of the variables—will be instantly transformed.
Repeat the last three steps to transform other variable columns.

Reconstituting the Code

With the variables all transformed and the static code components untouched, it’s time to finish the process by reconstituting the lines of code.

[su_note note_color=“#deff96”]

NOTE

If you accomplished the text transformation in a spreadsheet, ignore the first steps below that explain how to convert a table back to text. Instead, copy your text from the spreadsheet and paste back into your text or code editor; it should land in that application as tab- or comma-delineated text. Proceed to step 3 below from that point.[/su_note]

Select the entire table. Return to the top of the table on the first page. Position the mouse cursor over first, left-most column. When the cursor change to a downward-facing arrow, click and drag to the right until all columns in the table are selected.
Choose Table > Convert > Convert Table to Text. When the Convert Table to Text dialog appears, choose Tabs from the Separate Text With option (see Figure 9). Click OK.

Figure 9: Converting the table back to tab-separated text with the Convert Table to Text dialog.

Now that the table is back to being text, all that remains is to remove the tabs. Open Search and Replace and set the Find What field to the code for a tab, ^t.
Clear the Replace With field of any characters, code, or spaces as in Figure 10. Click Replace All.

Figure 10: In the final replacement operation tab separators are removed by replacing them with nothing.

Select all the transformed list items, copy, and paste back into the main or script code.

Using this technique we transformed this:

<option value="AUSTRIA">AUSTRIA</option>
<option value="AUSTRALIA">AUSTRALIA</option>
<option value="ARUBA">ARUBA</option>
<option value="AZERBAIJAN">AZERBAIJAN</option>
<option value="BARBADOS">BARBADOS</option>
<option value="BANGLADESH">BANGLADESH</option>
<option value="BELGIUM">BELGIUM</option>
<option value="BURKINA FASO">BURKINA FASO</option>

Into this:

<option value="Austria">Austria</option>
<option value="Australia">Australia</option>
<option value="Aruba">Aruba</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Barbados">Barbados</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belgium">Belgium</option>
<option value="Burkina Faso">Burkina Faso</option>

Using Word in this way, separating components from one another using Find and Replace and then using a table to easily select the segregated pieces, can be used to accomplish a great many tasks beyond changing text case. I’ve employed this technique for more than a decade, making short work of all sorts of transformations, formatting, and replacements to patterned content in hundreds of ways. Keep this technique in your tool belt, and you might find for it some of the other uses I’ve had over the years.

Breaking It Down

NOTE

Isolating and Transforming the Variables in Word

NOTE

Reconstituting the Code

NOTE

Related