Jump to content

Photo

Convert HTML element to object or string?

- - - - -

  • Please log in to reply
15 replies to this topic

#1
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash
I'm not sure if this exists so I don't know what to search for, but I'm kind of looking to convert an HTML element into a JavaScript object (or a string I can parse).

So I'd like to convert this

<div id="foo">
    <h1 class="greeting">Hello World!</h1>
    <p>Cum sociis natoque et, nascetur ridiculus mus.</p>
    <p>Etiam porta sem malesuada magna mollis euismod.</p>
</div>

Into something like this

{
    id: 'foo',
    type: 'div',
    children:[
        {
            class: 'greeting',
            type: 'h1',
            content: 'Hello World!'
        },
        {
            type: 'p',
            content: 'Cum sociis natoque et, nascetur ridiculus mus.'
        },
        {
            type: 'p',
            content: 'Etiam porta sem malesuada magna mollis euismod.'
        },
    ]
}

Although I'm not sure how it would handle when you had extreme nesting.
DO NOT OPEN THIS

Spoiler

#2
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
I'M ON IT

EDIT: Am I allowed to use jQuery?

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#3
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash

I'M ON IT

EDIT: Am I allowed to use jQuery?


Well I was hoping that that there was a way to do this natively with javascript. But a custom function would be great too!!

If you really want to have fun, don't use JQ ;)
DO NOT OPEN THIS

Spoiler

#4
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
I tried using jQuery… and then realised that I was only using jQuery to cycle through elements anyway >_<

Not using jQuery anymore :-)

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#5
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash

I tried using jQuery… and then realised that I was only using jQuery to cycle through elements anyway >_<

Not using jQuery anymore :-)


Yeah probably not in your best interest ;) You don't necessarily have to follow the format in my example, that was just what I was thinking.

Also how would it react to something like this?

<div>
    <p>Hello World! <a href="file.html">Lorem Ipsum</a> dolor si amet. 
</div>

DO NOT OPEN THIS

Spoiler

#6
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
I wasn't planning on following the format in your example; it is invalid JavaScript, for a start ;-)

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#7
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash

it is invalid JavaScript, for a start ;-)


Damnit...why? :(
DO NOT OPEN THIS

Spoiler

#8
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
{
	"id": "foo",
	"className": "",
	"type": "div",
	"children": [
		{
			"id": "",
			"className": "greeting",
			"type": "h1",
			"children": ["Hello World!"]
		}, {
			"id": "",
			"className": "",
			"type": "p",
			"children": ["Cum sociis natoque et, nascetur ridiculus mus."]
		}, {
			"id": "",
			"className": "",
			"type": "p",
			"children": ["Etiam porta sem malesuada magna mollis euismod."]
		}
	]
}

Just testing for bugs…




Damnit...why? :(


            class: 'greeting',



Due to an old specification (either ES2 or JS2, can't remember which), class is a reserved keyword :-)

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#9
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash
Awesome. Yeah I knew class was reserved, slipped my mind while posting my example ;)

BTW this is to be queried via JSON.
DO NOT OPEN THIS

Spoiler

#10
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
Here we go: http://jsfiddle.net/rUDxr/

Usage:
elementToObj ( [ element ] )

EDIT: hahaha, I just realised that that took nearly 45 minutes when I should have been doing homework… success! XD

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#11
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash
Woah. Dude. You fuggin rock. Some day I shall be as skilled as you.
DO NOT OPEN THIS

Spoiler

#12
Daniel15

Daniel15

    dan.cx

  • Moderators
  • 3,761 posts
  • Joined: 17-April 10
  • LocationMountain View, CA
  • Expertise:HTML, CSS, PHP, Java, Javascript, Node.js, SQL
Nice work Callum!

Arron, may I ask why you need this? :P

but I'm kind of looking to convert an HTML element into a JavaScript object (or a string I can parse).

var data = document.getElementById('foo').innerHTML;
You can parse HTML, right?
:lol:
Daniel15! :D
Posted Image

Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"

Spoiler

#13
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash

Here we go: http://jsfiddle.net/rUDxr/

Usage:

elementToObj ( [ element ] )
EDIT: hahaha, I just realised that that took nearly 45 minutes when I should have been doing homework… success! XD

 

 

Woah. Dude. You fuggin rock. Some day I shall be as skilled as you.

 

 

4 years later, I'm actually just now learning the fundamentals of OOP and basic CS concepts. 


DO NOT OPEN THIS

Spoiler

#14
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js
Wait, did we invent JSX four years ago in this thread?

good luck on the learnings!

Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae


#15
ArronH

ArronH

    I'm a httpster

  • Moderators
  • 3,667 posts
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML, CSS, Javascript, Graphics, Flash

Wait, did we invent JSX four years ago in this thread?

good luck on the learnings!

 

I hope not. We stitched from Angular to React at my office and the syntax is just terribly ugly. 


DO NOT OPEN THIS

Spoiler

#16
callumacrae

callumacrae

    JavaScript Ninja

  • Members
  • 3,467 posts
  • Joined: 20-January 11
  • LocationLondon
  • Expertise:HTML, CSS, Javascript, Node.js

I hope not. We stitched from Angular to React at my office and the syntax is just terribly ugly. 

You get used to it - it's super powerful once you stop hating the syntax.


Front-end developer and writer
Twitter | GitHub | phpBB Contributor and Website Team Member | macr.ae





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users