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 op­tions such as a in­dex 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 al­so 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 in­to ti­tle case or vice ver­sa may sound easy, and when work­ing with prose, it is; do­ing 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 al­so of­ten con­tains the coun­try (or oth­er vari­able) name twice, some­times even three times or more. While all the in­stances of the coun­try name can have their cas­es changed fair­ly eas­i­ly us­ing Microsoft Word, InCopy, and most oth­er word proces­sors. that ac­tion will al­so change the case of the code sur­round­ing the vari­ables. That is un­ac­cept­able be­cause 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 of­ten the code in ques­tion will fail or do some­thing un­ex­pect­ed if its writ­ten in a cer­tain case. Thus it isn’t pos­si­ble to pass an en­tire 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 se­lect 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 in­stances of each coun­try name in 202 list items in ei­ther the HTML or JavaScript versions—from ALL CAPS to Title Case with­out al­ter­ing the case of the sur­round­ing code. Doing that by hand, re­typ­ing each one, would be labor in­ten­sive and er­ror prone. It’s a bad idea. Instead, there’s a much eas­ier, semi-automated way to make the change. To do that, each item must be ex­pand­ed in­to 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 be­low.

<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 on­ly chal­lenge is to phys­i­cal­ly sep­a­rate those parts—the sta­t­ic from the variable—so that we can al­ter 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 ed­i­tor with a search and re­place func­tion and a spread­sheet pro­gram like Google Docs or Apple Numbers (both free). Follow the same in­struc­tions be­low, ad­just­ing for the your text or code ed­i­tor.

  1. Copy the en­tire list of items and paste it in­to 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 en­tire­ty, in­clu­sive of any punc­tu­a­tion, sym­bols, or spaces. Working with the HTML coun­tries list as an ex­am­ple, that would be <option value=“.
  3. Open Word’s Find and Replace utility.On Windows, de­pend­ing on your ver­sion of Word, you’ll like­ly find Find and Replace on the Edit menu. You can al­so lo­cate it by go­ing 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 ac­cess Find and Replace by press­ing its key­board com­mand of CMD+Shift+F. Alternatively, se­lect­ing the poor­ly named menu com­mand Edit > Find > Advanced Find and Replace will al­so 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 in­to the Find What field first sta­t­ic text com­po­nent you just copied.
  6. Set the Replace With field to re­place the sta­t­ic com­po­nent with it­self fol­lowed by a tab. Do that by en­ter­ing the code ^&^t.
  7. Click Replace All. If prompt­ed to search fur­ther, an­swer in the af­fir­ma­tive. When the search and re­place op­er­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 op­er­a­tion a tab stands be­tween the first sta­t­ic and vari­able com­po­nents.

  9. Copy the sec­ond piece of sta­t­ic text, every­thing af­ter the first vari­able and all the way up to the sec­ond vari­able. (If your code on­ly 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 in­to the Find What field.
  11. This time, in the Replace With field, Word must be told to put a tab be­fore and af­ter the Find What text. Do that by set­ting the Replace With field to this code: ^t^&^t. (If your code has on­ly the one vari­able, use this Replace With code in­stead: ^t^&.)
  12. Excute the re­place­ment with Replace All. If your code con­tains ad­di­tion­al vari­ables, keep go­ing, us­ing the tab ^t code and Find What Text ^& code to in­sert tab be­tween each sta­t­ic and vari­able com­po­nent.
  13. Perform Search and Replace one last time to in­sert a tab be­tween 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 an­oth­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 an­oth­er it’s time to make them sep­a­rate­ly se­lec­table so that all the vari­ables can be se­lect­ed at on­ce and trans­formed with­out al­ter­ing any of the sta­t­ic code.

NOTE

If you aren’t us­ing Microsoft Word, you can com­bine a spread­sheet ap­pli­ca­tion with the text or code ed­i­tor you’ve used up un­til this point. Copy the tab-delinated text from your ed­i­tor and paste it in­to a spread­sheet. Then fol­low the in­struc­tions be­low, us­ing 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 go­ing 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 di­alog ap­pears, make sure Separate Text At is set to Tabs and click OK (see Figure 5). Unless there was an er­ror in the Search and Replace op­er­a­tions, or er­rors in the code to be­gin with, the code should show be sep­a­rat­ed in­to 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 di­alog asks for the de­lin­eation mark­er to be used to sep­a­rat­ing text in­to 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 ta­ble on the first page and hov­er your cur­sor just above the first vari­able column. When the cur­sor is in po­si­tion, it will switch to a downward-facing ar­row like the one in Figure 7. Click to se­lect the en­tire column, 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 column of text by hov­er­ing the cur­sor near the top of the column and click­ing when it be­comes a downward-facing ar­row.

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

    Figure 8: The Change Case di­alog of­fers five text trans­for­ma­tion op­tions.

  10. Select Title Case, UPPERCASE, low­er­case, tOG­GLE cASE, or Sentence case, as your sit­u­a­tion re­quires and then click OK. Text in the se­lect­ed column—all of the variables—will be in­stant­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 un­touched, it’s time to fin­ish the process by re­con­sti­tut­ing the lines of code.

NOTE

If you ac­com­plished the text trans­for­ma­tion in a spread­sheet, ig­nore the first steps be­low that ex­plain how to con­vert a ta­ble back to text. Instead, copy your text from the spread­sheet and paste back in­to your text or code ed­i­tor; it should land in that ap­pli­ca­tion as tab- or comma-delineated text. Proceed to step 3 be­low from that point.

  1. Select the en­tire ta­ble. Return to the top of the ta­ble on the first page. Position the mouse cur­sor over first, left-most column. When the cur­sor change to a downward-facing ar­row, click and drag to the right un­til all columns in the ta­ble are se­lect­ed.
  2. Choose Table > Convert > Convert Table to Text. When the Convert Table to Text di­alog ap­pears, choose Tabs from the Separate Text With op­tion (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 ta­ble back to tab-separated text with the Convert Table to Text di­alog.

  4. Now that the ta­ble is back to be­ing text, all that re­mains is to re­move 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 fi­nal re­place­ment op­er­a­tion tab sep­a­ra­tors are re­moved by re­plac­ing them with noth­ing.

  7. Select all the trans­formed list items, copy, and paste back in­to 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 an­oth­er us­ing Find and Replace and then us­ing a ta­ble to eas­i­ly se­lect the seg­re­gat­ed pieces, can be used to ac­com­plish a great many tasks be­yond chang­ing text case. I’ve em­ployed this tech­nique for more than a decade, mak­ing short work of all sorts of trans­for­ma­tions, for­mat­ting, and re­place­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 us­es I’ve had over the years.

You may also like...

Leave a Reply

%d bloggers like this: