Category: JavaScript

Sometimes, we want to sort an HTML list with JavaScript.

In this article, we’ll look at how to sort an HTML list with JavaScript.

How to sort an HTML list with JavaScript?

To sort an HTML list with JavaScript, we can convert select the li elements, convert the node list of li elements into an array, do the sorting, and then replace the ul content with replaceChildren.

For instance, we write:

<button>
  sort
</button>
<ul>
  <li>32</li>
  <li>170</li>
  <li>28</li>
</ul>

to add a button and a list.

Then we write:

const button = document.querySelector('button')
const ul = document.querySelector('ul')
const lis = document.querySelectorAll('li')
button.onclick = () => {
  const sortedLis = [...lis].sort((a, b) => +a.textContent - +b.textContent)
  ul.replaceChildren(...sortedLis)
}

to select the button and ul with querySelector.

And we select the li’s with querySelectorAll.

Next, we set button.onclick to a function to sort the li’s when the button is clicked.

To sort them, we spread the lis into an array.

Then we call sort with a callback that sort the textContent of each entry converted to numbers with +.

And then we replace the existing li entries in the ul with the sorted ones by calling ul.replaceChildren with the entries from sortedLis.

They’ll be inserted in the same order they’re listed in the arguments.

Therefore, once we click sort, we see:

28
32
170

displayed.

Conclusion

To sort an HTML list with JavaScript, we can convert select the li elements, convert the node list of li elements into an array, do the sorting, and then replace the ul content with replaceChildren.

Sometimes, we want to prevent reload with link onclick without "#".

In this article, we’ll look at how to prevent reload with link onclick without "#".

How to prevent reload with link onclick without "#"?

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.

For instance, we write:

<a href=''>click me</a>

to add a link.

Then we write:

const a = document.querySelector('a')
a.onclick = (e) => {
  e.preventDefault()
  console.log('clicked')
}

to select the link with querySelector.

Next, we set a.onclick to a function that calls e.preventDefault to stop the default behavior, which is to refresh the page.

Therefore, when we click on the link, we see 'clicked' logged.

Conclusion

To prevent reload with link onclick without "#", we can call e.preventDefault inside the click event handler.

Sometimes, we want to find the domain name from the current page’s URL in JavaScript.

In this article, we’ll look at how to find the domain name from the current page’s URL in JavaScript.

How to find the domain name from the current page’s URL in JavaScript?

To find the domain name from the current page’s URL in JavaScript, we can use the location.hostname property.

For instance, we write:

console.log(location.hostname)

to get the domain name part of the current page URL.

Conclusion

To find the domain name from the current page’s URL in JavaScript, we can use the location.hostname property.

Sometimes, we want to set profile image as first letters of first and last name with JavaScript.

In this article, we’ll look at how to set profile image as first letters of first and last name with JavaScript.

How to set profile image as first letters of first and last name with JavaScript?

To set profile image as first letters of first and last name with JavaScript, we can add a div and make it round by setting the border-radius CSS property.

Then we can set the text inside the div by setting its textContent property.

For instance, we write:

<div id='profileImage'>

</div>

to add a div.

Then we write:

#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}

to add style the div.

We make it round by setting border-radius to 50%.

And we center the text by setting text-align to center and vertically center the text by setting line-height to match the height.

Next, we write:

const profileImage = document.getElementById('profileImage')
profileImage.textContent = 'JS

to select the div with getElementById and set the text by setting the textContent property.

Conclusion

To set profile image as first letters of first and last name with JavaScript, we can add a div and make it round by setting the border-radius CSS property.

Then we can set the text inside the div by setting its textContent property.

Sometimes, we want to fix the string replace method not replacing text containing literal \r\n strings in JavaScript.

In this article, we’ll look at how to fix the string replace method not replacing text containing literal \r\n strings in JavaScript.

How to fix the string replace method not replacing text containing literal \r\n strings in JavaScript?

To fix the string replace method not replacing text containing literal \r\n strings in JavaScript, we can call replace with a regex to match all instances of \r\n and replace them with the characters we want.

For instance, we write:

const value = 'abc\r\ndef'
const newVal = value.replace(/(?:\\[rn]|[\r\n])/g, "");
console.log(newVal)

to call value.replace to replace all instances of \r\n with empty strings.

We use the /(?:\\[rn]|[\r\n])/g regex to find all instances of \r\n in value.

As a result, newVal is "abcdef".

Conclusion

To fix the string replace method not replacing text containing literal \r\n strings in JavaScript, we can call replace with a regex to match all instances of \r\n and replace them with the characters we want.