JALT 2018 Technology in Teaching Workshop

Visualizing language: Using Regex and JavaScript

Learning outcomes

By the end of this workshop you should:


Activity 1

Work in pairs or small groups. Take it in turns to introduce yourselves by stating your name, teaching situation and reason for attending this workshop. Get to know each other by asking and answering questions.

Useful phrases

Remember the information for the next activity. Ask and answer questions. Get to know your classmates.

Website basics

Activity 2

Work in pairs or small groups. Discuss your answers to the following questions about websites.

  1. Which language is usually used for content?
  2. Which language is usually used to contol style?
  3. Which language usually controls behaviour?
  4. Which language is usually used to control interactions?
  5. What is server-side?
  6. What is client-side?
  7. What is a JavaScript library?
  8. What are regular expressions?
    1. hypertext mark-up language (.html)
    2. cascading styling sheets (.css)
    3. Javascript (.js)
    4. PHP (.php), Hypertext Preprocessor, a server-side scripting language.
    5. Server-side describes actions occuring on the web.
    6. Client-side describes actions on the user`s computer.
    7. A JavaScript library is a collection of pre-written JavaScript code. Common libraries include JQuery, Ajax, Angular
    8. Regular expressions (regex, regexp) are patterns that used to match character combinations in strings. Regex can search for particular combinations of words, prefixes, suffixes and letters within texts.

Patterns and pedagogy

Activity 3

Work in pairs or small groups. Decide which language features you would focus on for the following groups of students.


  1. Graduate students who have to have a research article (written in English) published in a scientific journal in order to graduate.
  2. Undergraduate students who need to describe a process in English in their laboratory report.
  3. Undergraduate English majors who overuse linking expressions in their narrative writing.
  4. High school students who need to understand complex grammar (e.g. conditionals) to pass the Center Shiken.
  5. Junior school students struggling with present perfect continous and present perfect simple.
  6. Elementary school students who have to describe common household items.

Your tool

Activity 4

Decide which language features you want to focus on for your students. Identify which patterns you need to identify. Identify any potential problems.


  1. Aim: help students pronounce "-ed" endings of regular verbs
  2. Actual pattern: final sound of base form of verb
  3. Findable Pattern: letters that realize the final sound, e.g. /f/ = f sound, but /gh/ = f sound (as in laugh)
  4. Potential problem: homographs, e.g. learned /d/ and learned /id/

Regular expressions in action

Activity 5

This simple tool can provide simple positive and negative responses to closed questions.

Try out the Automatic responder.

More example of the power of regex

Activity 6

The links below are to two tools that visualize language features using regular expressions.

Try each tool out. Try to work out how each tool works.

Work in pairs. Explain how each tool works.

Regular expressions

Activity 7

Regular expressions can look daunting. However, most times simple regular expressions will suffice. There are many types of regular expressions and in each computer language, they work slightly differently. In this workshop, we focus on regular expressions used in JavaScript. This presentation aims to introduce you to the key details of regular expressions. The aim is for you to remember all the details, but to have a general overall. Mr Google is probably going to assit you in finding code that someone else has already written. Rather than great programming skills, you should initially focus on developing great search skills.

The url of the presentation embedded below is here.


Activity 8

  1. Either join, sign-in or log on as a guest user to CodePen.
  2. Explore these templates.
  3. Fork the template and rename it.
  4. Alter one item and immediately check the program still works. If you see a white exclamation mark in a red circle, press Ctrl + z to return to a working version.
  5. Keep changing the code incrementally until you finish.

Coding Train: Introduction to Regex

Activity 9 (11 min video)

Put on your earphones and get ready to ride the coding train with its enthusiastic presenter.

Workshop review

Answer these questions.

Help line

Create your tool. If it does not work completely or properly, simply email the Codepen link to me, and I will try to solve the problem.