Categories
JavaScript

JavaScript for optimizers #6: Removing currency symbols

Want to test more than just the color of a button? Then, you need to learn JavaScript. I started a series covering practical step-by-step ways to use JavaScript to set up winning experiments on your website.

Each article in the series covers a different JavaScript method, illustrated by applying best practices to websites as hypothetical cases.

Business case: Optimizing prices by removing currency symbols

Our hypothetical case for this chapter is about optimizing prices by removing currency symbols

Research showed that currency symbols cause stress in the brain. This stress might cause people to leave your website.

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that currency symbols cause people to leave websites, we expect that hiding them will cause an increase in conversions. We’ll measure this using conversion-rate.”

To test this hypothesis, we’re going to apply the changes below:

The script removes the currency symbols
The script removes the currency symbols

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

var prices = document.querySelectorAll(".price");
function removeCurrency(node) {
  for (var i = 0; i < node.length; i++) {
    var price = node[i].innerHTML;
    var price = price.replace(/₹ /g, "");
    var price = price.replace(/€ /g, "");
    var price = price.replace(/\$ /g, "");
    node[i].innerHTML = price;
  }
}
removeCurrency(prices);

Breakdown of the code

1. New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

.innerHTML is a property that allows you to retrieve and change the HTML markup within the selected element. The property returns and sets the HTML markup as a string. You can insert a bunch of HTML between quotes and insert it into an element.

Just using the method behind an object will return the markup. When you add an equals sign (=) and add a string after it, you will replace the markup.

.innerHTML returns the markup.

.innerHTML = “string” sets the markup.

.replace(regexp|substr, newSubstr|function) is a string method that returns a new string based on the arguments given. You need to input the first argument to decide your desired string match. Decide if you want to match it with another string or a regular expression. 

Then you need to add a second argument that controls what changes with the matched string. The string can be replaced with another string or changed by a function that processes the string.

Regexp is a regular expression. These expressions are a whole another language on their own and can become highly complicated. The main idea of these expressions is matching strings based on the pattern that you provide. 

You can tell the script that you want to use a regular expression by using an expression literal. Just write to forward slashes and a pattern between them. 

You can write a g behind the literal to tell the expression to match the pattern multiple times. This g is called a global flag. Otherwise, it would only match once.

/pattern/g

Let’s take a look at the regular expression used in the script.

/₹ /g is the first regular expression. It searches the string for the ₹ characters that have space behind them and returns them. Because of the global flag, it will keep matching until it has checked the entire string.

/€ /g is the second regular expression. It searches the string for the characters that have a space behind them and returns them. Because of the global flag, it will keep matching until it has checked the entire string.

/\$ /g is the third regular expression. It searches the string for the $ characters that have a space behind them and returns them. Because of the global flag, it will keep matching until it has checked the entire string. 

Notice how there is an extra backslash in the last pattern? The dollar sign is used in a regular expression to signal the end of a pattern. If we want to match a string with a dollar sign, it will need to be escaped from the pattern. You can do this by adding a backslash before the character.

But how do we know that our patterns are working the right way?

I like to use a free tool called regex101.

Here you can test all your regular expressions
Here you can test all your regular expressions

You can test your regular expressions here and get more information about the way it works. First, you need to select the programming language we are using:

We select JavaScript as our language
We select JavaScript as our language

Then we enter the pattern. You can just enter the pattern without the backslashes and global flag because those are already visible.

We input our pattern
We input our pattern

Then we enter our test strings:

We enter our test strings
We enter our test strings


Notice how we match the string want! The script will return this in the code for our other function to use. Take a look at the explanation to see a detailed overview of the pattern.

We validated that our regular expression works
We validated that our regular expression works

substr is the alternative way of inputting a match in the replace method. You can just enter a string to match the exact match of that string. This type of argument can be helpful if you are just replacing certain words within a string. 

Anything beyond that will probably not work the way you would want it. I recommend getting used to regular expressions as they are helpful in many other applications.

newSubstr is the argument that decides what replaces the string. In our script, we replace it with an empty string to remove it. You could also replace it with a different currency.

A function can be inserted into the replace function to change the returned string. An example of this would be inserting a function that transforms a string to a lower case.

2. Logic

var prices = document.querySelectorAll(".price");

In this line of code, we assign all the price class elements to the prices variable. You will save the elements in an array because of the querySelectorAll method.

function removeCurrency(node) {

This function checks an array of elements and removes the euro, dollar, and rupee currency symbols from them.

for (var i = 0; i < node.length; i++) {

We set up a loop the check each element in the array. The amount of times the loop will run depends on the length of the array. You will loop an array of five items, five times with this function.

var price = node[i].innerHTML;

We assign the innerHTML of the current array item to the price variable. 

var price = price.replace(/₹ /g, "");

Then we replace all of the Indian rupees symbols that have space behind them with an empty string. 

var price = price.replace(/€ /g, "");

Then we replace all of the euro symbols that have space behind them with an empty string. 

var price = price.replace(/\$ /g, "");

Then we replace all of the dollar symbols that have space behind them with an empty string. 

node[i].innerHTML = price;

Then we replace our new HTML markup that is saved in the price variable to the current node. Now it is visible in the DOM.

}

This curly bracket ends our loop. If the condition is false, it will rerun the loop.

}

This curly bracket ends the function.

removeCurrency(prices);

Then we call our function to remove all of the currency symbols we defined.

The currency symbols are now removed from the webpage
Removing currency symbols is a piece of cake

3. Exercise

The best way to learn JavaScript is to try it. 

Instead of removing currency symbols I want you to change all the currency symbols to euro(€). And shoot me a message to let me know what you think!

Try to change the prices to euro
Try to change the prices to euro

The previous article is featured on Convert:

JavaScript for Optimizers #5: Working With Input Fields

Get access to all JavaScript exercise code.