Author: John Au-Yeung

Sometimes, we want to sort a date string array with JavaScript.

In this article, we’ll look at how to sort a date string array with JavaScript.

How to sort a date string array with JavaScript?

To sort a date string array with JavaScript, we can use the JavaScript date’s sort method.

For instance, we write:

const data = ["09/06/2015", "25/06/2015", "22/06/2015", "25/07/2015", "18/05/2015"];
const sorted = data.sort((a, b) => {
  const newA = a.split('/').reverse().join('-');
  const newB = b.split('/').reverse().join('-');
  return +new Date(newA) - +new Date(newB)
})
console.log(sorted)

We call data.sort with a function that gets the date strings and change their format to something that can used with the Date constructor.

Then we create date objects from each of them, convert them to timestamps, and subtract them to return the number to determine the sorting.

If the returned number is negative, then order stays the same. Otherwise, the a and b are reversed.

Therefore, sorted is ['18/05/2015', '09/06/2015', '22/06/2015', '25/06/2015', '25/07/2015'].

Conclusion

To sort a date string array with JavaScript, we can use the JavaScript date’s sort method.

Sometimes, we want to find the number of lines in an HTML text area with JavaScript.

In this article, we’ll look at how to find the number of lines in an HTML text area with JavaScript.

How to find the number of lines in an HTML text area with JavaScript?

To find the number of lines in an HTML text area with JavaScript, we can call the match method on the input value.

For instance, we write:

<textarea></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector('textarea')
textarea.onchange = (e) => {
  console.log(e.target.value.match(/\n/g).length + 1)
}

to select the text area with querySelector.

Then we set textarea.onchange to a function that takes the input value from e.target.value.

Then we call match on it with the line break regex to find the number of line breaks.

And finally, we add 1 to that to get the number of lines.

Conclusion

To find the number of lines in an HTML text area with JavaScript, we can call the match method on the input value.

Sometimes, we want to get the second to last URL string segment with JavaScript.

In this article, we’ll look at how to get the second to last URL string segment with JavaScript.

How to get the second to last URL string segment with JavaScript?

To get the second to last URL string segment with JavaScript, we can use the string’s split and array’s slice methods.

For instance, we write:

const url = 'http://www.example.com/website/projects/2'
const [secondLast] = url.split('/').slice(-2)
console.log(secondLast)

to split the url by the slashes with split.

Then we call slice to return an array with the last 2 entries of the URL segment string array.

Finally, we destructure the first entry from the returned array and assigned it to secondLast.

Therefore, secondLast is 'projects'.

Conclusion

To get the second to last URL string segment with JavaScript, we can use the string’s split and array’s slice methods.

Sometimes, we want to get right position of an element with JavaScript.

In this article, we’ll look at how to get right position of an element with JavaScript.

How to get right position of an element with JavaScript?

To get right position of an element with JavaScript, we can use the style.right property.

For instance, we write:

<div style='position: relative; right: 50px'>
  hello world
</div>

to add an element with the right position set.

Then we write:

const div = document.querySelector('div')
console.log(div.style.right)

to get select the div with querySelector.

Then we use div.style.right to get the right position.

Therefore, we see '50px' logged.

Conclusion

To get right position of an element with JavaScript, we can use the style.right property.

Sometimes, we want to loop through all descendants of a div with JavaScript.

In this article, we’ll look at how to loop through all descendants of a div with JavaScript.

How to loop through all descendants of a div with JavaScript?

To loop through all descendants of a div with JavaScript, we can select all the descendants with getElementsByTagName.

For instance, we write:

<div id='id'>
  <p>
    bar
  </p>
  <p>
    baz
  </p>
  <p>
    foo
  </p>
</div>

to add a div with some descendant elements.

Then we select the descendants and loop through them with:

const ancestor = document.getElementById('id')
const descendents = ancestor.getElementsByTagName('*');

for (const d of descendents) {
  console.log(d)
}

We select the div with ID id with getElementById.

Then we call ancestor.getElementsByTagName with '*' to select all the descendant elemnts from ancestor.

Finally, we loop through them with a for-of loop.

Therefore, we should see all the p elements logged.

Conclusion

To loop through all descendants of a div with JavaScript, we can select all the descendants with getElementsByTagName.