Verify whether a variable includes the tag name "img."

Question

Verify whether a variable includes the tag name "img."

Currently, I am working with a variable that holds user input in HTML format. This input may consist of either plain text or an image. I am looking to determine whether the user has entered an image or just simple text.

Here is an example of user entry:

this.userEntries = <p> < img  src=" nature.png"></p>

txtOrImg: function () {
// The logic we are aiming for 
if the userEntries contain the tag name 'img', then return ... otherwise, return ...
}

javascript vue.js vuejs2

Answer 1

Answer №1

Utilize the DOMParser() method along with its parseFromString() Method. Afterwards, navigate through it using Element.querySelector() to access a specific child Element

const content = `<p><img src="nature.png"></p>`;

const documentParsed = new DOMParser().parseFromString(content, "text/html");
const imageElement = documentParsed.querySelector("img");

if (imageElement) {
  console.log("Image found!", imageElement);
} else {
  console.log("No image found");
}

To handle multiple images, utilize Element.querySelectorAll():

const content = `<p>
  <img src="nature.png">
  <img src="buildings.png">
</p>`;

const documentParsed = new DOMParser().parseFromString(content, "text/html");
const allImages = documentParsed.querySelectorAll("img");

allImages.forEach(image => {
  console.log(`Image found: ${image.src}`);
});

Answer 2

Utilize the DOMParser() method along with its parseFromString() Method. Afterwards, navigate through it using Element.querySelector() to access a specific child Element

const content = `<p><img src="nature.png"></p>`;

const documentParsed = new DOMParser().parseFromString(content, "text/html");
const imageElement = documentParsed.querySelector("img");

if (imageElement) {
  console.log("Image found!", imageElement);
} else {
  console.log("No image found");
}

To handle multiple images, utilize Element.querySelectorAll():

const content = `<p>
  <img src="nature.png">
  <img src="buildings.png">
</p>`;

const documentParsed = new DOMParser().parseFromString(content, "text/html");
const allImages = documentParsed.querySelectorAll("img");

allImages.forEach(image => {
  console.log(`Image found: ${image.src}`);
});

Verify whether a variable includes the tag name "img."

Answer №1

Similar questions

What is the best way to prevent excessive rerenders when verifying if database information has been successfully retrieved?

How to Store Values from a ReadStream in an Array

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

Develop a responsive image component with flexible dimensions in React

Enhancing error handling with Axios in Vue.js

elevate the div with a floating effect

The use of set.has in filtering does not produce the desired outcome

Invoke a function from a page that has been reloaded using Ajax

How can I stop TypeScript from causing my builds to fail in Next.js?

Having trouble with JQuery toggle()? Need some assistance with fixing it?

Is it possible to pass slot data back to the parent component in Vue in order to propagate a prop down?

Resolving Typescript custom path problem: module missing

What methods does Angular use to display custom HTML tags in IE9/10 without causing any issues for the browser?

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

Laravel route does not receive a parameter sent via Ajax

modifying variable values does not impact what is displayed on the screen

Enhance the functionality of a form by dynamically adding or deleting input rows using

I am facing difficulties in adding dynamic content to my JSON file

Developing a personalized Magento2 extension with added support for PWA technologies

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR