Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges
Tags: freecodecamp, algorithms, challenge, javascript
Published: 2020-07-24 17:22:02

---
title: Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges
published: true
description: My guide, notes, and solution to freeCodeCamp's intermediate algorithm challenge, "Convert HTML Entities" 
tags: #freeCodeCamp, #algorithms, #challenge, #javascript
canonical_url: https://virenb.cc/fcc-027-convert-html
series: Solving freeCodeCamp's Algorithm Challenges
---

!['Convert HTML Entities'](//images.ctfassets.net/yzwpq1epaq68/4K4Fy2mYbsVG6ktyrODXG2/b2957f6eab5ca7f1fe174cfc4fea391a/ss-027.png)

Let's solve freeCodeCamp's intermediate algorithm scripting challenge, 'Convert HTML Entities'.



### Starter Code

```javascript
function convertHTML(str) {
  return str;
}

convertHTML("Dolce & Gabbana");
```



### Instructions

Convert the characters `&`, `<`, `>`, `"` (double quote), and `'` (apostrophe), in a string to their corresponding HTML entities.

### Test Cases

```
convertHTML("Dolce & Gabbana") should return "Dolce &amp; Gabbana".
convertHTML("Hamburgers < Pizza < Tacos") should return "Hamburgers &lt; Pizza &lt; Tacos".
convertHTML("Sixty > twelve") should return "Sixty &gt; twelve".
convertHTML('Stuff in "quotation marks"') should return "Stuff in &quot;quotation marks&quot;".
convertHTML("Schindler's List") should return "Schindler&apos;s List".
convertHTML("<>") should return "&lt;&gt;".
convertHTML("abc") should return "abc".
```



# Our Approach

The instructions for this challenge are short and to the point. 

- Our one input is `str`, a string. Looking at the test cases, length and characters vary. Some have white spaces, some have non-letter characters, another is all letters.

- We must return a string.

- We need to convert the non-letter characters to their HTML entities within the `str` and return that.

  

For reference -

| Character        | HTML Entity |
| ---------------- | ----------- |
| &                | `&amp;`     |
| <                | `&lt;`      |
| >                | `&gt;`      |
| " (double quote) | `&quot;`    |
| ' (apostrophe)   | `&apos;`    |



Like a few other challenges, I think it would be beneficial to split up `str` into an array to better evaluate the input. 



```javascript
"Dolce & Gabbana".split('');
// [ 'D', 'o', 'l', 'c', 'e', ' ', '&', ' ', 'G', 'a', 'b', 'b', 'a', 'n', 'a' ]
```



The above looks like an eye sore but I think it will be easier to single out the characters we are looking to change.

We can create a variable to hold the `str.split('')`.

```javascript
const strSplit = str.split('');
```



The next step will be to loop through our newly created array, going to each index to see if it is equal to one of the special characters we're looking for. 



We'll use a for loop and a switch statement. We can make each special character a case and then change that specific index to the HTML entity of the special character.



[switch (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch "MDN docs for switch")



```javascript
for (let i = 0; i < strSplit.length; i++) {
	switch(strSplit[i]) {
    case "&":
      strSplit[i] = "&amp;";
      break;
    case "<":
      strSplit[i] = "&lt;";
      break;           
    case ">":
      strSplit[i] = "&gt;";
      break;
    case "'":
      strSplit[i] = "&apos;"
      break;
    case '"':
      strSplit[i] = "&quot;"
      break;       
  }
}
```



Our array is now updated with the special characters changed. The last step would be to convert the array back into a string. We can accomplish that using `join()`.



```javascript
return strSplit.join('');
```



That is all!



# Our Solution

```javascript
function convertHTML(str) {
  const strSplit = str.split('');
  for (let i = 0; i < strSplit.length; i++) {
    switch(strSplit[i]) {
      case "&":
        strSplit[i] = "&amp;";
        break;
      case "<":
        strSplit[i] = "&lt;";
        break;           
      case ">":
        strSplit[i] = "&gt;";
        break;
      case "'":
        strSplit[i] = "&apos;"
        break;
      case '"':
        strSplit[i] = "&quot;"
        break;       
    }
  }
  
  return strSplit.join('');
}
```



# Links & Resources

['Convert HTML Entities' Challenge on fCC](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities "Intermediate Algorithm Scripting: Convert HTML Entities on fCC Website")

[freeCodeCamp](https://www.freecodecamp.org/, "freeCodeCamp")

[Donate to FCC!](https://www.freecodecamp.org/donate "fCC Donation Page")

[Solution on my GitHub](https://github.com/virenb/fcc-algorithms/blob/master/021---spinal-tap-case.js "GitHub Solution")



Thank you for reading!