Cara menggunakan lodash decode html entities

HTML entities can be decoded by using several different methods involving vanilla JavaScript or JavaScript libraries. This guide will only go through vanilla JavaScript methods for decoding HTML entities as they are easy and straightforward.

Decoding HTML Entities with the <textarea> DOM Element

The first method is by using the textarea element. As the name suggests, the textarea element is used to create a simple text area where each character is interpreted as simple plain text.:

function decode(str) {

let txt = document.createElement("textarea");

txt.innerHTML = str;

return txt.value;

}

In the above code we first created the textarea element using the document.createElement() method. Then we wrote the string containing HTML entities inside the textarea using innerHTML property. This way the string will be converted to simple text and entities will be converted to characters. Lastly, we returned the string stored inside the txt variable which is the textarea.

Now if we call the decode function with an HTML entity as parameter it will return it as simple text:

let encodedStr = "&lt;p&gt;";

let decodedStr = decode(encodedStr);

console.log(decodedStr);

Decoding HTML Entities with the DOMParser.parseFromString() method

The second method is by using the DOMParser.parseFromString() method. The DOMParser.parseFromString() method takes a string containing HTML and returns it as an HTML element:

function decode(str) {

let txt = new DOMParser().parseFromString(str, "text/html");

return txt.documentElement.textContent;

}

In the above code we first passed the string as an argument to the DOMParser.parseFromString() method and got it back as an HTML element by specifying the second argument as “text/html”. We then returned the text content of the newly created HTML element.

Now calling the decode() function:

let encodedStr = "&lt;p&gt;";

let decodedStr = decode(encodedStr);

console.log(decodedStr);

Conclusion

HTML Entities are necessary for proper viewing of text on webpages. Some websites contain code snippets as simple text. Without Entities it would be difficult to differentiate between what is a HTML code for the webpage and what is just plain text.

Lodash adalah library JavaScript yang dapat membantu kita mengelola sebuah object pada JavaScript termasuk Array. Lodash memilik banyak fungsi yang bisa digunakan. Lodash juga membuat kode kita lebih bersih dan rapih.

Pada artikel kali ini kita akan membahas beberapa fungsi Lodash yang dapat digunakan untuk membantu mengelola object Array pada JavaScript.

Lodash: https://lodash.com/

01. _.chunk
Digunakan untuk memecah array ke dalam sebuah grup sesuai dengan ukuran yang ditentukan. Sebagai contoh sebagai berikut.

var arrObj = _.chunk(['a', 'b', 'c', 'd'], 2);
console.log(arrObj);
// result => [['a', 'b'], ['c', 'd']]

var arrObj = _.chunk(['a', 'b', 'c', 'd'], 3);
console.log(arrObj);
// result => [['a', 'b', 'c'], ['d']]

02. _.union
Digunakan unutk menggabungkan beberapa object Array menjadi sebuah list dengan nilai unik.

var arrObj = _.union([2], [1, 2]);
console.log(arrObj);
// result => [2, 1]

03. ._uniq
Digunakan untuk menghilangkan nilai yang duplikat pada list Array.

var arrObj = _.uniq([2, 1, 2]);
console.log(arrObj);
// result => [2, 1]

04. _.without
Digunakan untuk membuat list Array tanpa nilai yang diberikan.

var arrObj = _.without([2, 1, 2, 3], 1, 2);
console.log(arrObj);
// result => [3]

05. _.reverse
Digunakan untuk membalikan nilai (reverse) Array.

var arrObj = _.reverse([1, 2, 3]);
console.log(arrObj);
// result => [3, 2, 1]

Itulah beberapa fungsi Lodash yang dapat digunakan untuk mengelola object Array pada JavaScript. Untuk lebih lengkap nya dapat dilihat pada website Lodash.