Javascript split the HTML attributes and value

Question

I have a list of javascript string with HTML tags and want to split the tags.

<img class="logo" src="http://i.imgur.com/z38lrml.png" height="60px" />
<section id = "test">

I tried to split by double quotes (") but getting only

class=", logo"

I want to split in the following array

[class="logo"], [src="http://i.imgur.com/z38lrml.png"],[height="60px"]

and so on for the next line.

Is there anyway to separate?

Thank you

So, you want an array of objects where each object has a single key value pertaining to each attribute in the element? — Taplar
– Taplar, Commented Jun 13, 2019 at 17:42
And I do mean object because [class="logo"] is not a valid array. — Taplar
– Taplar, Commented Jun 13, 2019 at 17:43
if you really wanna do this from strings.. split on spaces. reduce that to only look for strings that contain '=' ?? otherwise developer.mozilla.org/en-US/docs/Web/API/Element/attributes — rlemon
– rlemon, Commented Jun 13, 2019 at 17:44
nvm, splitting on spaces is flawed. but element.attributes is still relevant maybe — rlemon
– rlemon, Commented Jun 13, 2019 at 17:45

junvar · Accepted Answer · 2019-06-13 17:43:17Z

2

It seems your HTML tag is actually just a string? In that case, you can use regex:

let html = '<img class="logo" src="http://i.imgur.com/z38lrml.png" height="60px" />';
let attributes = html.match(/[\w-]+="[^"]*"/g);
console.log(attributes);

answered Jun 13, 2019 at 17:43

junvar

11.7k2 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

random · Accepted Answer · 2019-06-13 18:04:25Z

0

const attributes = document.querySelector('img').getAttributeNames();
const img = document.querySelector('img');

const output = [...attributes].map((attr) => {
  const val = img.getAttribute(attr);
  return `${attr}" = "${val}`;
});

console.log(output);

<img class="logo" src="http://i.imgur.com/z38lrml.png" height="60px" />

Edit --

If your html is a string, use DOMParser to convert it into html.

const str = `<img class="logo" src="http://i.imgur.com/z38lrml.png" height="60px" />
<section id = "test">`;

const dom = new DOMParser().parseFromString(str, 'text/html');

let output = [];
[...dom.body.children].forEach((node) => {
    const attributes = node.getAttributeNames();
    output.push([...attributes].map((attr) => {
        const val = node.getAttribute(attr);
        return `${attr}" = "${val}`;
    }));
})

console.log(output);

edited Jun 13, 2019 at 18:04

answered Jun 13, 2019 at 17:46

random

7,9093 gold badges21 silver badges25 bronze badges

5 Comments

Binita Gyawali Over a year ago

@randomSoul, I will have more than 100 lines of HTML tags

Andreas Over a year ago

Check your quotes ;) "class\" = \"logo"

Andreas Over a year ago

@BinitaGyawali "I will have more than 100 lines..." - And the problem is?

random Over a year ago

@Andreas - The quotes are perfect when run in the browser.

Andreas Over a year ago

Your script outputs <attributeName>" = "<value> instead of <attributeName> = "<value>"

Collectives™ on Stack Overflow

Javascript split the HTML attributes and value

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related