javascript - 用里面的数据替换html中的输入文本字段

Question

'tab_text'是这段代码从'mytable'重新生成的html代码。我想要的只是让这个重新生成的 html 有输入值而不是输入文本字段。它将用于一些提取任务。为此，我找到了一些代码片段并尝试对其进行编辑以利于我:

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, "") 

显然，我需要在最后一行添加一个正则表达式而不是 "" 。我尝试了 input[type=text][id^=*] 但没有成功。

您能帮我找到解决该问题的方法吗？

Answer 1

这里不要使用正则表达式，使用 DOM 方法要简单得多。在你的情况下replaceChild会运作良好。

首先，您需要选择所有输入字段。然后迭代该集合，最后用其值替换每个集合。

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>

在上面的演示中，所有输入字段都将被替换。当然，如果需要，您可以扩展 querySelectorAll 中的 CSS 选择器来处理其他表单元素:input、textarea、select。

UPD。您可以通过以下方式将上述解决方案与代码结合起来，以获取表格的文本表示形式，并将输入转换为文本:

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>";

演示: http://jsfiddle.net/hn7Lakx6/