Category: JavaScript

Sometimes, we want to extract anchor text and URL from anchor tags with JavaScript

In this article, we’ll look at how to extract anchor text and URL from anchor tags with JavaScript.

How to extract anchor text and URL from anchor tags with JavaScript?

To extract anchor text and URL from anchor tags with JavaScript, we can set the string as the innerHTML of an element.

For instance, we write:

const str = `
  <a href="http://yahoo.com">Yahoo</a>
  <a href="http://google.com">Google</a>
`
const div = document.createElement('div')
div.innerHTML = str
const anchors = div.querySelectorAll('a')
const arr = [...anchors].map((a) => {
  const {
    textContent,
    href
  } = a
  return {
    textContent,
    href
  }
})
console.log(arr)

to create a div, set the innerHTML of the div to the str` string, and then get the values by selecting the anchors.

To do this, we call createElement to creatr the div.

Then we set div.innerHTML to str to populate the div with the anchors.

Next, we select the anchors with div.querySelectorAll.

And then we spread the anchors into an array and call map to return the properties we’re looking for.

textContent has the anchor text and href has the link’s URL.

Therefore, arr is

[{
  href: "http://yahoo.com/",
  textContent: "Yahoo"
}, {
  href: "http://google.com/",
  textContent: "Google"
}]

Conclusion

To extract anchor text and URL from anchor tags with JavaScript, we can set the string as the innerHTML of an element.

Sometimes, we want to check for broken images in React with JavaScript

In this article, we’ll look at how to check for broken images in React with JavaScript.

How to check for broken images in React with JavaScript?

To check for broken images in React with JavaScript, we can set the onError of the img element to a error handler function.

For instance, we write:

import React from "react";

export default function App() {
  const onError = (e) => {
    console.log(e);
  };

  return (
    <>
      <img onError={onError} src="abc" alt="abc" />
    </>
  );
}

to set the onError of the img element to the onError function.

Since the src prop is set to an invalid URL, we see the error object logged in onError.

Conclusion

To check for broken images in React with JavaScript, we can set the onError of the img element to a error handler function.

Sometimes, we want to get last day of the month with JavaScript.

In this article, we’ll look at how to get last day of the month with JavaScript.

How to get last day of the month with JavaScript?

To get last day of the month with JavaScript, we can use the Date constructor.

For instance, we write:

const lastDayOfMonth = (year, month) => {
  return new Date((new Date(year, month, 1)) - 1);
}

console.log(lastDayOfMonth(2022, 11))

to create a Date with the last day of the month as its value.

In it, we create a Date instance with the date of the first day of the next month with (new Date(year, month, 1).

Then we subtract that by 1 to return the timestamp of the last minute of the last day of the last month.

And we use the returned timestamp to create a new Date instance.

Therefore, the console log is Wed Nov 30 2022 23:59:59 GMT-0800 (Pacific Standard Time).

Conclusion

To get last day of the month with JavaScript, we can use the Date constructor.

Sometimes, we want to fix document.getElementById("test").style.display="hidden" not working with JavaScript.

In this article, we’ll look at how to fix document.getElementById("test").style.display="hidden" not working with JavaScript.

How to fix document.getElementById("test").style.display="hidden" not working with JavaScript?

To fix document.getElementById("test").style.display="hidden" not working with JavaScript, we should set the display property to 'none' or the visibility to 'hidden'.

For instance, we write:

<div id='test'>
  hello world
</div>

to add the div with ID test.

Then we write:

document.getElementById("test").style.display = "none";

or

document.getElementById("test").style.visibility = "hidden";

to either set the display property to 'none' or the visibility property to 'hidden' to hide the div.

Conclusion

To fix document.getElementById("test").style.display="hidden" not working with JavaScript, we should set the display property to 'none' or the visibility to 'hidden'.

Sometimes, we want to count the frequency of characters in a string using JavaScript.

In this article, we’ll look at how to count the frequency of characters in a string using JavaScript.

How to count the frequency of characters in a string using JavaScript?

To count the frequency of characters in a string using JavaScript, we can use the spread operator and the array reduce method.

For instance, we write:

const counter = str => {
  return [...str].reduce((total, letter) => {
    if (!total[letter]) {
      return {
        ...total,
        [letter]: 1
      }
    } else {
      return {
        ...total,
        [letter]: total[letter] + 1
      }
    }
  }, {});
};

console.log(counter("aabsssd"));

to define the counter function that spreads the string to a character array.

Then we call reduce on the array with a callback that checks whether total[letter] already exists.

If it doesn’t exist, we add the [letter] property and set it to 1.

Otherwise, we increment total[letter] by 1 and return that object.

We set total to an empty object as its initial value by setting that as the 2nd argument of reduce.

Therefore, the console log logs

{
  a: 2,
  b: 1,
  d: 1,
  s: 3
}

Conclusion

To count the frequency of characters in a string using JavaScript, we can use the spread operator and the array reduce method.