Author: John Au-Yeung

Sometimes, we want to create a string with n characters with JavaScript.

In this article, we’ll look at how to create a string with n characters with JavaScript.

How to create a string with n characters with JavaScript?

To create a string with n characters with JavaScript we can use the JavaScript string’s repeat instance method.

For instance, we write:

const result = "x".repeat(20);
console.log(result)

We call 'x'.repeat with 20 to return a string that repeats ‘x’ 20 times.

Therefore, result is 'xxxxxxxxxxxxxxxxxxxx'.

Conclusion

To create a string with n characters with JavaScript we can use the JavaScript string’s repeat instance method.

Sometimes, we want to convert a string to regex object with JavaScript.

In this article, we’ll look at how to convert a string to regex object with JavaScript.

How to convert a string to regex object with JavaScript?

To convert a string to regex object with JavaScript, we can use the RegExp constructor.

For instance, we write:

const value = "someone@example.com";
const pattern = "^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$"
const re = new RegExp(pattern);
const match = re.test(value);
console.log(match)

to convert the pattern string to a regex object with the RegExp constructor.

Then we can call re.test to check if value matches the re regex pattern.

Therefore, match is true since value matches the pattern, which is an email regex.

Conclusion

To convert a string to regex object with JavaScript, we can use the RegExp constructor.

Sometimes, we want to dynamically create HTML elements using JavaScript

In this article, we’ll look at how to dynamically create HTML elements using JavaScript.

How to dynamically create HTML elements using JavaScript?

To dynamically create HTML elements using JavaScript, we can use the createElement method.

For instance, we write:

<div id="main"></div>

to add a container div.

Then we write:

const tree = document.createDocumentFragment();
const link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://example.com");
link.appendChild(document.createTextNode("linkText"));

tree.appendChild(link);
document.getElementById("main").appendChild(tree);

to call createElement with 'a‘ to create an anchor element.

Then we call setAttribute to set the id and href attributes.

Next, we call link.appendChild to append the text node with the link text into it.

And then we call appendChild with link and tree to append the link and tree as child of elements tree and the the div with id main respectively.

Conclusion

To dynamically create HTML elements using JavaScript, we can use the createElement method.

Sometimes, we want to extract values from an HTML date input with JavaScript.

In this article, we’ll look at how to extract values from an HTML date input with JavaScript.

How to extract values from an HTML date input with JavaScript?

To extract values from an HTML date input with JavaScript, we can add a change event listener to the date input.

Then we can get the input value from the e.target.value property in the event listener.

For instance, we write:

<input type="date" />

to add an input.

Then we write:

const input = document.querySelector('input')
input.onchange = (e) => {
  console.log(e.target.value)
}

to select an input.

Then we set the input.onchange property to a function that logs the e.target.value, which is the selected date string.

The selected date will be a ISO-8601 format string.

Conclusion

To extract values from an HTML date input with JavaScript, we can add a change event listener to the date input.

Then we can get the input value from the e.target.value property in the event listener.

Sometimes, we want to add an alias for an object property in JavaScript.

In this article, we’ll look at how to add an alias for an object property in JavaScript.

How to add an alias for an object property in JavaScript?

To add an alias for an object property in JavaScript, we can add a getter.

For instance, we write:

const obj = {
  a: 1,
  get b() {
    return this.a
  }
}

console.log(obj.a)
console.log(obj.b)

obj.a = 2
console.log(obj.a)
console.log(obj.b)

to add the b getter which returns the latest value of a.

Therefore, from the first 2 console logs, we see that obj.a and obj.b are both 1.

Then after we set obj.a to 2, we see that obj.a and obj.b from the console log.

Conclusion

To add an alias for an object property in JavaScript, we can add a getter.