Tag Archives: javascript

How to use bootstrap icons in React project

There are a few ways to go about it but I found this way to be the easiest and simple. First of all, download the package and add it to your dependencies.

npm i bootstrap-icons --save

Then add this line to your styles.css file at the top of your index.js file

import 'bootstrap-icons/font/bootstrap-icons.css';

Now, whenever you write an HTML with i tag with the bi code like below, you’ll see the icon appear!

<i class="bi bi-house"></i>

For example, go to https://icons.getbootstrap.com/icons/house/ we can see the code to the right that the code snippet is indeed “bi bi-house” for the house icon.

Mask email address for GDPR reasons with JavaScript

This is a simple JavaScript function that will mask your email address following this pattern:

  • If it’s not an email, the input string will be returned without modification.
  • If the first part of the email is shorter than 4 characters, the entire username will be masked (me@example.com => *@e*****e.com)
  • If the domain part of the email is shorter than 4 symbols, the entire domain will be masked
    (username@abc.com => u******e@***.com
  • The TLD part (.com/.net/.org and etc) is never masked
  • If the input string contains multiple emails (for example the whole log message from the server), all email addresses found in the string will be processed.
/**
 * Mask email address with asterisks to comply GDPR
 * john.doe@example.com => j******e@e****e.com
 * @param {string} emailAddress email address
 * @returns {string} masked email address
 */
function maskEmailAddress (emailAddress) {
	function mask(str) {
		var strLen = str.length;
		if (strLen > 4) {
			return str.substr(0, 1) + str.substr(1, strLen - 1).replace(/\w/g, '*') + str.substr(-1,1);
		} 
		return str.replace(/\w/g, '*');
	}
	return emailAddress.replace(/([\w.]+)@([\w.]+)(\.[\w.]+)/g, function (m, p1, p2, p3) {		
		return mask(p1) + '@' + mask(p2) + p3;
	});
	
	return emailAddress;
}

return maskEmailAddress('random string username@example.com test');

Putting HTML in inline JavaScript

A tag inside inline JavaScript string literal is interpreted by the HTML parser as a closing tag, causing syntax errors.
According to w3.org

Although the STYLE and SCRIPT elements use CDATA for their data model, for these elements, CDATA must be handled differently by user agents. Markup and entities must be treated as raw text and passed to the application as is. The first occurrence of the character sequence “</” (end-tag open delimiter) is treated as terminating the end of the element’s content. In valid documents, this would be the end tag for the element.

In real world scenario web browsers only end parsing a CDATA script block on an actual close-tag.
Unfortunately, there is no such special handling for script blocks in XHTML, causing < (or &) character to generate syntax errors if it is not properly escaped (i.e. HTML entity encoded).
There are different approaches to avoid such problems:

1) Encode the HTML string in base64 and decode it when reading
2) Split the <script> tag like that

var str = '</' + 'script' + '>';

3) Use CDATA

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>