Replace input text fields in html with data inside

Question

'tab_text' is a html code regenerated from 'mytable' by this code. All i want is for this regenerated html to have input values instead of input text fields. It will be used for some extraction task. For this , i found some code snippet and tried to edit that for my benefit:

var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var j=0;
mytable = document.getElementById('countersTable'); // id of table

    for(j = 0 ; j < mytable.rows.length ; j++)
    {
        tab_text=tab_text+mytable.rows[j].innerHTML+"</tr>";
    }

    tab_text=tab_text+"</table>";

    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, "")

Obviously, I need to add a regex instead of "" at last line. I tried input[type=text][id^=*] It did not work.

Would you please help me find a solution to that issue?

input[type=text][id^=*] isn't a RegEx it's a jQuery selctor — Liam
– Liam, Commented Mar 20, 2015 at 14:57

dfsq · Accepted Answer · 2015-03-20 15:33:47Z

2

Don't use regular expressions here, it's much simpler to use DOM methods. In your case replaceChild will work well.

First of all, you need to select all input, fields. Then you iterate over the collection, and finally replace every with its value.

var inputs = document.querySelectorAll('input');

for (var i = 0; i < inputs.length; i++) {
    var text = document.createTextNode(inputs[i].value);
    inputs[i].parentNode.replaceChild(text, inputs[i]);
}

<div>
    Some <input type="text" value="Thomas" />
</div>
<p>One more <input type="text" value="Field" /></p>

In the demo above, all the input fields will be replaced. Of course, you can extend CSS selector in querySelectorAll to process other form elements if you need: input, textarea, select.

UPD. This is how you can combine above solution with your code to get text representation of the table with inputs turned into text:

var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var j = 0;
var mytable = document.getElementById('countersTable'); // id of table

for (j = 0; j < mytable.rows.length; j++) {

    var rowClone = mytable.rows[j].cloneNode(true),
        inputs = rowClone.querySelectorAll('input');

    for (var i = 0; i < inputs.length; i++) {
        var text = document.createTextNode(inputs[i].value);
        inputs[i].parentNode.replaceChild(text, inputs[i]);
    }

    tab_text = tab_text + rowClone.innerHTML + "</tr>";
}

tab_text = tab_text + "</table>";

Demo: http://jsfiddle.net/hn7Lakx6/

edited Mar 20, 2015 at 15:33

answered Mar 20, 2015 at 15:00

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

Şansal Birbaş Over a year ago

it must be done only inside 'mytable'. I mean, only inputs inside 'tab_text' must be converted to their values. How can i succeed that?

dfsq Over a year ago

tab_text is id or class?

Şansal Birbaş Over a year ago

it is a html code regenerated from 'mytable' by this code. All i want is for this regenerated html to have input values instead of input text fields

dfsq Over a year ago

Check this demo of how you can combine my solution with your code: jsfiddle.net/hn7Lakx6

Collectives™ on Stack Overflow

Replace input text fields in html with data inside

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related