Blog / Productivity

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

Learn how to quickly change case or other transformations on parts of code list items without touching the other parts. The example in this tutorial converts 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.

Coding a list of options such as a index of coun­tries or cities in for use in an HTML form, in PHP for a query, or as vari­ables that can be passed to JavaScript is a com­mon task. Unfortunately what is also com­mon is that sweep­ing changes must be made to the items in the list. A change like con­vert­ing each coun­try name from all caps into title case or vice ver­sa may sound easy, and when work­ing with prose, it is; doing that among a list of code items, how­ev­er, can be a night­mare.

The prob­lem is that, while a user sees a sim­ple drop­down field with a list of names, the code to gen­er­ate that field and list is much longer than mere­ly the name of the coun­try. It also often con­tains the coun­try (or oth­er vari­able) name twice, some­times even three times or more. While all the instances of the coun­try name can have their cas­es changed fair­ly eas­i­ly using Microsoft Word, InCopy, and most oth­er word proces­sors. that action will also change the case of the code sur­round­ing the vari­ables. That is unac­cept­able because case mat­ters in code. Sometimes it’s mere­ly a mat­ter of aesthetics—coders like to stick with a com­mon cap­i­tal­iza­tion and case scheme of all low­er­case, all caps, or some­where in between—but just as often the code in ques­tion will fail or do some­thing unex­pect­ed if its writ­ten in a cer­tain case. Thus it isn’t pos­si­ble to pass an entire list of code-wrapped vari­ables through a text case chang­er.

Here are snip­pets of the two lists we’ll work with. Both are snip­pets from lists of 202 coun­tries each. The first set is cod­ed to be a sim­ple drop­down menu select field in an HTML quote or con­tact form while the sec­ond is the same list in trun­cat­ed JavaScript for use in a trav­el 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 con­vert those coun­try names—both instances of each coun­try name in 202 list items in either the HTML or JavaScript versions—from ALL CAPS to Title Case with­out alter­ing the case of the sur­round­ing code. Doing that by hand, retyp­ing each one, would be labor inten­sive and error prone. It’s a bad idea. Instead, there’s a much eas­i­er, semi-automated way to make the change. To do that, each item must be expand­ed into its sta­t­ic and vari­able com­po­nents.

Breaking It Down

The key is to look at the lines of code in the list and iden­ti­fy, and short­ly set apart, the iden­ti­cal, repet­i­tive bits of text from the vari­able por­tions.

Using col­or cod­ing to sep­a­rate code that must not be changed (in blue) from the vari­ables 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 fol­lows to con­stituent pieces.

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

The only chal­lenge is to phys­i­cal­ly sep­a­rate those parts—the sta­t­ic from the variable—so that we can alter the vari­able text with­out touch­ing the sta­t­ic text. That’s why we need Microsoft Word—any ver­sion, Windows or Mac.

NOTE

If you don’t have Word you use any oth­er text or code edi­tor with a search and replace func­tion and a spread­sheet pro­gram like Google Docs or Apple Numbers (both free). Follow the same instruc­tions below, adjust­ing for the your text or code edi­tor.

  1. Copy the entire list of items and paste it into a blank, new doc­u­ment in Microsoft Word.
  2. Working left-to-right from the can of the line, copy the first sta­t­ic com­po­nent in its entire­ty, inclu­sive of any punc­tu­a­tion, sym­bols, or spaces. Working with the HTML coun­tries list as an exam­ple, that would be <option value=“.
  3. Open Word’s Find and Replace utility.On Windows, depend­ing on your ver­sion of Word, you’ll like­ly find Find and Replace on the Edit menu. You can also locate it by going to the Home tab and click­ing on Replace in the Editing group. Perhaps the eas­i­est way to open it is to sim­ply press the Find and Replace key­board short­cut CTRL+H.

    Mac users will most eas­i­ly access Find and Replace by press­ing its key­board com­mand of CMD+Shift+F. Alternatively, select­ing the poor­ly named menu com­mand Edit > Find > Advanced Find and Replace will also open Find and Replace.

  4. Figure 1: The Mac version of Find and Replace.

    Figure 1: The Mac ver­sion of Find and Replace.

  5. Switch to the Replace tab and paste into the Find What field first sta­t­ic text com­po­nent you just copied.
  6. Set the Replace With field to replace the sta­t­ic com­po­nent with itself fol­lowed by a tab. Do that by enter­ing the code ^&^t.
  7. Click Replace All. If prompt­ed to search fur­ther, answer in the affir­ma­tive. When the search and replace oper­a­tion has fin­ished the first sta­t­ic com­po­nent will be sep­a­rat­ed from the first vari­able by a tab (turn on Show All Non-Printing Characters to see the tabs as in Figure 2).
  8. Figure 2: After the first Find and Replace operation a tab stands between the first static and variable components.

    Figure 2: After the first Find and Replace oper­a­tion a tab stands between the first sta­t­ic and vari­able com­po­nents.

  9. Copy the sec­ond piece of sta­t­ic text, every­thing after the first vari­able and all the way up to the sec­ond vari­able. (If your code only con­tains a sin­gle vari­able per line, copy all the way to the end of the line.)
  10. Switch back to Find and Replace, which can be left on screen while you copy from the page, and paste that sec­ond sta­t­ic com­po­nent into the Find What field.
  11. 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 set­ting the Replace With field to this code: ^t^&^t. (If your code has only the one vari­able, use this Replace With code instead: ^t^&.)
  12. Excute the replace­ment with Replace All. If your code con­tains addi­tion­al vari­ables, keep going, using the tab ^t code and Find What Text ^& code to insert tab between each sta­t­ic and vari­able com­po­nent.
  13. Perform Search and Replace one last time to insert a tab between the end of the last vari­able and any sta­t­ic code that fol­lows it. Use ^t^& in the Replace With field. Afterward you should have code sim­i­lar to mine in Figure 3.
Figure 3: Variables and static text are now separated from one another by tabs.

Figure 3: Variables and sta­t­ic text are now sep­a­rat­ed from one anoth­er by tabs.

Isolating and Transforming the Variables in Word

Now that the two types of con­tent with­in each list item are iden­ti­fied and set off from one anoth­er it’s time to make them sep­a­rate­ly selec­table so that all the vari­ables can be select­ed at once and trans­formed with­out alter­ing any of the sta­t­ic code.

NOTE

If you aren’t using Microsoft Word, you can com­bine a spread­sheet appli­ca­tion with the text or code edi­tor you’ve used up until this point. Copy the tab-delinated text from your edi­tor and paste it into a spread­sheet. Then fol­low the instruc­tions below, using your spread­sheet application’s Change Case or text trans­for­ma­tion fea­tures.

  1. Select all the lines of code.
  2. On the Insert rib­bon tab click on Table and then Convert Text to Table (see Figure 4). In old­er, ribbon-free ver­sions of Word the com­mand can be found by going to Table > Convert > Convert Text to Table.
  3. Figure 4: Choosing Convert Text to Table from the Insert tab on the ribbon.

    Figure 4: Choosing Convert Text to Table from the Insert tab on the rib­bon.

  4. When the Convert Text to Table dia­log 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 oper­a­tions, or errors in the code to begin with, the code should show be sep­a­rat­ed into columns of sta­t­ic and columns of vari­able com­po­nents as in Figure 6.
  5. Figure 5: The Convert Text to Table dialog asks for the delineation marker to be used to separating text into columns.

    Figure 5: The Convert Text to Table dia­log asks for the delin­eation mark­er to be used to sep­a­rat­ing text into columns.

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

    Figure 6: Once con­vert­ed, all vari­ables and sta­t­ic code com­po­nents will be in clean columns.

  6. Return to the top of the table on the first page and hov­er your cur­sor just above the first vari­able col­umn. When the cur­sor is in posi­tion, it will switch to a downward-facing arrow like the one in Figure 7. Click to select the entire col­umn, across all pages.
  7. 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.

    Figure 7: Select a col­umn of text by hov­er­ing the cur­sor near the top of the col­umn and click­ing when it becomes a downward-facing arrow.

  8. Choose Format > Change Case to open the Change Case dia­log box (see Figure 8).
  9. Figure 8: The Change Case dialog offers five text transformation options.

    Figure 8: The Change Case dia­log offers five text trans­for­ma­tion options.

  10. Select Title Case, UPPERCASE, low­er­case, tOGGLE cASE, or Sentence case, as your sit­u­a­tion requires and then click OK. Text in the select­ed column—all of the variables—will be instant­ly trans­formed.
  11. Repeat the last three steps to trans­form oth­er vari­able columns.

Reconstituting the Code

With the vari­ables all trans­formed and the sta­t­ic code com­po­nents untouched, it’s time to fin­ish the process by recon­sti­tut­ing the lines of code.

NOTE

If you accom­plished the text trans­for­ma­tion in a spread­sheet, ignore the first steps below that explain how to con­vert a table back to text. Instead, copy your text from the spread­sheet and paste back into your text or code edi­tor; it should land in that appli­ca­tion as tab- or comma-delineated text. Proceed to step 3 below from that point.

  1. Select the entire table. Return to the top of the table on the first page. Position the mouse cur­sor over first, left-most col­umn. When the cur­sor change to a downward-facing arrow, click and drag to the right until all columns in the table are select­ed.
  2. Choose Table > Convert > Convert Table to Text. When the Convert Table to Text dia­log appears, choose Tabs from the Separate Text With option (see Figure 9). Click OK.
  3. Figure 9: Converting the table back to tab-separated text with the Convert Table to Text dialog.

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

  4. 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.
  5. Clear the Replace With field of any char­ac­ters, code, or spaces as in Figure 10. Click Replace All.
  6. Figure 10: In the final replacement operation tab separators are removed by replacing them with nothing.

    Figure 10: In the final replace­ment oper­a­tion tab sep­a­ra­tors are removed by replac­ing them with noth­ing.

  7. Select all the trans­formed list items, copy, and paste back into the main or script code.

Using this tech­nique we trans­formed 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, sep­a­rat­ing com­po­nents from one anoth­er using Find and Replace and then using a table to eas­i­ly select the seg­re­gat­ed pieces, can be used to accom­plish a great many tasks beyond chang­ing text case. I’ve employed this tech­nique for more than a decade, mak­ing short work of all sorts of trans­for­ma­tions, for­mat­ting, and replace­ments to pat­terned con­tent in hun­dreds of ways. Keep this tech­nique in your tool belt, and you might find for it some of the oth­er uses I’ve had over the years.

You may also like...

%d bloggers like this: