Category: JavaScript

Sometimes, we want to strip HTML from text with JavaScript

In this article, we’ll look at how to strip HTML from text with JavaScript.

How to strip HTML from text with JavaScript?

To strip HTML from text with JavaScript, we call parseFromString to parse the HTML string.

Then we get its text content.

For instance, we write

const strip = (html) => {
  const doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
};

to define the strip function.

In it, we call parseFromString to parse the html string into a DOM object.

Then we get the text from the DOM object with textContent.

Conclusion

To strip HTML from text with JavaScript, we call parseFromString to parse the HTML string.

Then we get its text content.

Sometimes, we want to make JavaScript execute after page load.

In this article, we’ll look at how to make JavaScript execute after page load.

How to make JavaScript execute after page load?

To make JavaScript execute after page load, we use the defer attribute.

For instance, we write

<script src="script.js" defer></script>

to add the defer attribute to the script tag to make script.js load after the page is loaded.

Conclusion

To make JavaScript execute after page load, we use the defer attribute.

To scroll to bottom of div with JavaScript, we set scrollTop to scrollHeight.

For instance, we write

const objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

to get the div with getElementById.

Then we set its scrollTop property to its scrollHeight value to scroll to the bottom.

Sometimes, we want to use HTML5 Canvas and JavaScript to take in-browser screenshots.

In this article, we’ll look at how to use HTML5 Canvas and JavaScript to take in-browser screenshots.

How to use HTML5 Canvas and JavaScript to take in-browser screenshots?

To use HTML5 Canvas and JavaScript to take in-browser screenshots, we use the getDisplayMedia method.

For instance, we write

<video style="width: 100%; height: 100%; border: 1px black solid" />

to add a video element.

Then we write

const mediaStream = await navigator.mediaDevices.getDisplayMedia();
const video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = (e) => {
  video.play();
  video.pause();
};

to call getDisplayMedia to get permission for using the display.

Then we select the video element with querySelector.

And then we set the srcObject to the mediaStream that we get after permission is granted.

Then we set onloadedmetadata to a function that calls play to play the video and pause to pause it once the display is captured.

Conclusion

To use HTML5 Canvas and JavaScript to take in-browser screenshots, we use the getDisplayMedia method.

Sometimes, we want to retrieve an HTML element’s actual width and height with JavaScript.

In this article, we’ll look at how to retrieve an HTML element’s actual width and height with JavaScript.

How to retrieve an HTML element’s actual width and height with JavaScript?

To retrieve an HTML element’s actual width and height with JavaScript, we use its offsetWidth property.

For instance, we write

const width = document.getElementById("foo").offsetWidth;

to select the element with getElementById.

Then we use its offsetWidth property to get its width in pixels.

Conclusion

To retrieve an HTML element’s actual width and height with JavaScript, we use its offsetWidth property.