visual display for textarea

[midhul]

hi,
i have a textarea and a frame on my web page.
there is html code in my text area.
i need a code that can read the code in the textarea and take all the elements and their attributes
into strings. for example if there is a text box named text1 and size attttribute
as 5 then the code should make the string as text1_size = 5
then it sould display all the elements in the frame visually and make them drag n drop. when the user clicks drags and releases any element on this page, it should automatically take the x and y position to where it is dragged as strings

[Jesdisciple]

Use a regex to define what you're looking for and how you'll react to it, then put your reaction in a draggable P/DIV/SPAN. See http://www.dynamicdrive.com/dynamicindex11/domdrag/ and http://w3schools.com/jsref/jsref_obj_regexp.aspv

If you want me to guide you, you'll need to be more specific about which attributes should be involved (just size?).

[midhul]

I dont understand how to use regex,
can you guide me please.
Not only size but all the attributes present

[Jesdisciple]

Then http://www.regular-expressions.info/javascript.html is more appropriate for you than the previous link.

That text is gonna get awful long... Are you sure you want every attribute shown? I think it would be hard for the user to handle the elements.

Are you sure this should be in an <iframe>? This will require one more HTML page and some extra scripting than if you were to use a <div> instead.

[midhul]

let it be in a div!
thanks!

[midhul]

i understood the basic of javascript regex
but i dont understand how i can use it for what i want.
Can you guide me for the script!(let it be in a div instead of an iframe)
Thanks!

[midhul]

all the attributes should only be taken into variables.
the ones that relate to display like size and color etc. are to be shown.
in the display

[Nile]

Please use the edit button under your post, instead of making a new post.

[Jesdisciple]

*cries* I just typed a nearly complete article and closed the tab. I need to write my drafts on my filesystem from now on...

Anyway, what do you mean by "taken into variables"? Please be as precise as possible.

Here's a pattern for a simple tag. Refer to the W3Schools reference for details and see how far you can go with the attribute pattern.

var regex = /^<([a-z][a-z\d]*)\s*\/?>$/mi;

Every HTML tag begins with a letter, but some (AFAIK only h1-h6) have numbers after that. I also optionally included the XHTML self-closing-tag slash and the zero or more whitespace characters which some browsers require with it.

[midhul]

it means:
if there is an attribute called size=3 of element1 then the variable called element1_size = 3 will be created
if there is another attribute called color=red
then element1_color=red
and so on...