Jquery function to change html tags

Question

I have a HTML page with 2 textarea , one Input and one Output. In the Input textarea will enter the following HTML structure:

<table>
    <tr>
        <td>TEXT: <input type="text" value="" /></td>
    </tr>
    <tr>
        <td>TEXT: <input type="text" value="" /></td>
    </tr>
    <tr>
        <td>TEXT: <input type="text" value="" /></td>
    </tr>   
</table>

Would that by clicking the submit button it converted this formant for this structure in the output textarea:

<ul>
    <li>
        <label>TEXT:<label> 
        <input type="text" value="" />
    </li>
    <li>
        <label>TEXT:<label> 
        <input type="text" value="" />
    </li>
    <li>
        <label>TEXT:<label> 
        <input type="text" value="" />
    </li>
</ul>

ie jQuery function should:

replace the <TABLE> by <UL>
replace the <TD> by <LI>
remove the tag <TR>
and add <LABEL> tag the word "TEXT"

My HTML code looks like this:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Beta style</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
        <script>
            function gerador() {
                var code = $('textarea[name=message]').val(); //Pega código do input
                alert(code);
                //$("body").append("<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>");//Cria campo Output
                $('#output').val(code); //Escreve codigo no Output
                $('#output:contains("TEXT")').wrapInner('&lt;label&gt; &lt;label &#47; &gt;');
            }
        </script>
    </head>
    <body>
        <h2>Input</h2>
        <textarea name="message" id="input" rows="10" cols="100"></textarea>
        <input type="button" value="Submit" onclick="gerador();" />
    </body>
</html>

I'm not able to add the tag inside the textarea .

Answer 1

The simple way is to use contents on the td elements:

var table = $("table"); // Limit this as appropriate
var ul = $("<ul>");
table.find("td").each(function() {
  ul.append($("<li>").append($("<label>").append($(this).contents())));
});
table.replaceWith(ul);

Live example

What that does:

Gets the appropriate table (I've just used $("table") , but I'm sure you'll want to make that more specific).
Creates an unordered list.
Loops through the td elements in the table.
For each td element:
1. Creates an li
2. Creates a label
3. Moves the .contents() of the td into the label ( contents includes text nodes).
4. Appends the label to the li
5. Appends the li to the ul
Replaces the table with the ul .

This does the same thing, but may be clearer:

var table = $("table"); // Limit this as appropriate
var ul = $("<ul>");
table.find("td").each(function() {
    var li = $("<li>");
    var label = $("<label>");
    label.append($(this).contents());
    li.append(label);
    ul.append(li);
});
table.replaceWith(ul);

Live copy

Answer 2

How's this?

function gerador() {

    var code = $('textarea[name=message]').val();

    /* prevent the creation of multiple output-blocks if someone clicks on the submit-button more than once */
    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }

    /* replace all the things you want */
    code = code.replace(/\<table>/g, "<ul>");
    code = code.replace(/\<\/table>/g, "</ul>");
    code = code.replace(/\<td>/g, "<li>");
    code = code.replace(/\<\/td>/g, "</li>");
    code = code.replace(/\<tr>/g, "");
    code = code.replace(/\<\/tr>/g, "");
    code = code.replace(/\TEXT/g, "<label>TEXT</label>");

    /* output the new code */
    $('#output').val(code);
}

Jquery function to change html tags

Question

2 answers

solution1
3 2014-05-26 12:47:26

solution2
0 ACCPTED 2014-05-26 13:01:30

Jquery function to change html tags

Question

2 answers

solution1 3 2014-05-26 12:47:26

solution2 0 ACCPTED 2014-05-26 13:01:30

solution1
3 2014-05-26 12:47:26

solution2
0 ACCPTED 2014-05-26 13:01:30