Question

例如，我有以下文本，HTML页面中根本没有任何标记：

Color: red
Shape: square
Side: 1mm

尽可能多的行，但三个足以满足这个问题。即便是一个人。

在这些行中，我总是the beginning of the text string，colon+space (: )和the end of the text string。

我应该如何将the beginning of the text string变为<tr><td>，将colon+space变为:</td><td>，将the end of the text string变为</td></tr>？

感谢@Andrew Willems（剧本）和@Phil（进一步的建议），一切都已经开始运行。

Answer 1

这里的原始文本在文本之前和之后有一些额外的不必要的行，以证明需要处理，以及处理，额外行的能力。

var opening = '<table id="newborn_table"><tbody>';
var closing = '</tbody></table>';
var origText = document.querySelector('#source').innerText;
var lines = origText.split('\n').filter(function(line) {
  return (line !== "");
});
var rowsText = '';
lines.forEach(function(line) {
  var parts = line.split(': ');
  rowsText +=
    '<tr><td>' +
    parts[0] +
    '</td><td>' +
    parts[1] +
    '</td></tr>'
});
document.querySelector('#result').innerHTML =
  opening + rowsText + closing;

#newborn_table td {
  border: solid red 1px;
}

<p>Original text:<p>
<pre id="source">

Color: red
Shape: square
Side: 1mm

</pre>
<p>Parsed table:</p>
<div id="result"></div>

Answer 2

假设您实际想要类似......

<table id="newborn_table">
    <tbody>
        <tr>
            <td>Color</td>
            <td>red</td>
        </tr>
        <tr><!-- etc --></tr>
    </tbody>
</table>

您应该可以像这样映射字符串

function createTable(str, id) {
    let table = document.createElement('table'),
        tbody = document.createElement('tbody');

    table.setAttribute('id', id || 'newborn_table');
    table.setAttribute('border', 1);
    table.appendChild(tbody);

    str.split('\n').forEach(row => {
        let tr = document.createElement('tr');
        row.split(': ').forEach(cell => {
            let td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
        });            
        tbody.appendChild(tr);
    });
    return table;
}

var str = `Color: red
Shape: square
Side: 1mm`;

document.body.appendChild(createTable(str));

将几个结构化文本字符串转换为HTML表格

2 个答案: