Question

解析表的Wikicode是

{| class="wikitable"
|-
! Header 1
! Header 2
! Header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}

我需要使用此file中的正则表达式将其解析为<table> </table>等HTML格式吗？

Answer 1

找到表格
- 查找每一行
- 如果行=将其存储为表属性
- 如果行在开头有!，则渲染标题行
  - 获取并呈现每个标题
- 否则，这是一个正常的行
  - 获取并呈现每个单元格
渲染表：将所有碎片放在一起，然后返回

https://jsfiddle.net/n1dp3fcs/2/

var attrs = "", headers = "", rows = "";
function renderTables(wiki) {
  wiki.replace(findTable, parseTable);
  var HTML = "<table" + (attrs ? " " + attrs : "") + ">" +
    (headers ? "<thead>" + headers + "</thead>" : "") +
    (rows ? "<tbody>" + rows + "</tbody>" : "") +
  "</table>";
  attrs = headers = rows = "";
  return HTML;
}

var findTable = /\{\|\s*(.*?)\s*\|\}/g,
    parseTable = function(match, content) {
      Array.prototype.forEach.call(content.split(newRow), renderRow);
    };

var newRow = /\s*\|-\s*(?:\|\s*)?/g,
    renderRow = function(content) {
      console.log("tr", content, arguments);
      if (content.indexOf("=") !== -1) { console.log("attrs"); attrs += content; }
      else if (content[0] === "!") { console.log("th"); headers += "<tr>" + content.replace(findHeader, renderHeader) + "</tr>"; }
      else { console.log("td"); rows += "<tr>" + content.replace(findCol, renderCol) + "</tr>"; }
    };

var findHeader = /\s*!\s*([^!]+?)(?=\s*!|$)/g, renderHeader = "<th>$1</th>";

var findCol = /(?:^\s*|\s*\|\s*)([^\|]+?)(?=\s*\||$)/g, renderCol = "<td>$1</td>";

如何解析wiki文本表HTML？

1 个答案: