중첩 테이블과 Rowspan 처리하기 (HTML 테이블 파싱의 어려운 부분)

| 국가    | 2020 | 2021 | 2022 |    <- 헤더
| 미국    | 100  | 200  | 300  |    <- 예상
| 150     | 250  | 350  |          <- "미국" 누락 (rowspan 계속)

function expandRowspans(table) {
  const rows = Array.from(table.rows);
  const grid = [];

  rows.forEach((rowEl, rowIndex) => {
    if (!grid[rowIndex]) grid[rowIndex] = [];
    let colIndex = 0;

    Array.from(rowEl.cells).forEach(cell => {
      // 다음 비어있는 열 찾기
      while (grid[rowIndex][colIndex] !== undefined) {
        colIndex++;
      }

      const text = cell.textContent.trim();
      const rowSpan = parseInt(cell.rowSpan, 10) || 1;
      const colSpan = parseInt(cell.colSpan, 10) || 1;

      // 이 요소가 걸치는 모든 셀 표시
      for (let r = 0; r < rowSpan; r++) {
        const targetRow = rowIndex + r;
        if (!grid[targetRow]) grid[targetRow] = [];

        for (let c = 0; c < colSpan; c++) {
          grid[targetRow][colIndex + c] = text;
        }
      }

      colIndex += colSpan;
    });
  });

  // 행 길이 정규화
  const maxCols = Math.max(...grid.map(r => r.length));
  return grid.map(row => {
    const normalized = new Array(maxCols).fill("");
    row.forEach((val, i) => normalized[i] = val ?? "");
    return normalized;
  });
}

<table>
  <tr>
    <td>국가</td>
    <td>
      <table>  <!-- 중첩! -->
        <tr><td>인구</td><td>3.3억</td></tr>
      </table>
    </td>
  </tr>
</table>

function isNestedTable(table) {
  let parent = table.parentElement;

  while (parent) {
    if (parent.tagName === "TABLE") {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
}

// 페이지 스캔 시
function getTopLevelTables() {
  const all = document.querySelectorAll("table");
  return Array.from(all).filter(t => !isNestedTable(t));
}

function extractCellText(cell) {
  const clone = cell.cloneNode(true);

  // 중첩 테이블 제거 (텍스트는 textContent를 통해 이미 포함됨)
  clone.querySelectorAll("table").forEach(t => t.remove());

  // 보이지 않는 요소 제거
  clone.querySelectorAll("style, script").forEach(el => el.remove());

  return (clone.textContent || "").replace(/\s+/g, " ").trim();
}

| v t e  국가별 인구 목록              |
| 순위 | 국가   | 인구         |
| 1    | 중국   | 14억         |

function isWikipediaNavRow(row) {
  const firstCell = row[0] || "";

  // 네비게이션 행의 일반적인 패턴
  const patterns = [
    /^v\s+t\s+e\s/i,           // "v t e "
    /^\s*v\s*\|\s*t\s*\|\s*e/i, // "v | t | e"
    /^\[v\]\s*\[t\]\s*\[e\]/i   // "[v] [t] [e]"
  ];

  return patterns.some(p => p.test(firstCell));
}

function detectHeaderRowIndex(matrix) {
  for (let i = 0; i < Math.min(3, matrix.length - 1); i++) {
    if (isWikipediaNavRow(matrix[i])) {
      return i + 1;  // 헤더는 다음 행
    }
  }
  return 0;  // 기본값: 첫 번째 행이 헤더
}

<table>
  <tr><td colspan="4">분기별 매출 (백만 달러)</td></tr>
  <tr><td>Q1</td><td>Q2</td><td>Q3</td><td>Q4</td></tr>
  <tr><td>100</td><td>120</td><td>115</td><td>130</td></tr>
</table>

function isTitleRow(row, nextRow) {
  if (!row || !nextRow) return false;

  const uniqueValues = new Set(row.filter(v => v.trim()));
  const nextUniqueValues = new Set(nextRow.filter(v => v.trim()));

  // 타이틀 행의 특성:
  // 1. 고유 값이 하나만 있음 (colspan으로 반복)
  // 2. 다음 행에는 여러 고유 값이 있음 (실제 헤더)
  // 3. 단일 값이 긴 텍스트 (보통 30자 이상)

  return (
    uniqueValues.size === 1 &&
    nextUniqueValues.size > 2 &&
    row[0] && row[0].length > 30
  );
}

|        |        | 출전 시간         | 성적           |
| 선수   | 국적   | MP | 선발 | 분  | 골 | 어시스트 | xG |
| 홀란드 | 노르웨이 | 35 | 33  | 2950| 36 | 8      | 32 |

["", "", "출전 시간", "출전 시간", "출전 시간", "성적", "성적", "성적"]

function isGroupHeaderRow(row, nextRow) {
  if (!row || !nextRow || row.length !== nextRow.length) return false;

  // 이웃과 같은 값을 가진 셀 수 세기
  let repeatCount = 0;
  for (let i = 1; i < row.length; i++) {
    if (row[i] && row[i] === row[i-1]) repeatCount++;
  }

  const repeatRatio = repeatCount / (row.length - 1);

  // 그룹 헤더 행은 보통 40% 이상 반복 값을 가짐
  // 그리고 다음 행이 더 많은 고유 값을 가짐
  const uniqueInRow = new Set(row.filter(v => v.trim())).size;
  const uniqueInNext = new Set(nextRow.filter(v => v.trim())).size;

  return repeatRatio > 0.4 && uniqueInNext > uniqueInRow;
}

function mergeGroupAndSubHeaders(groupRow, subHeaderRow) {
  return subHeaderRow.map((subHeader, idx) => {
    const group = (groupRow[idx] || "").trim();
    const sub = (subHeader || "").trim();

    if (!group) return sub;
    if (!sub) return group;
    if (sub.toLowerCase() === group.toLowerCase()) return sub;

    return `${group} - ${sub}`;
  });
}

// 결과: ["선수", "국적", "출전 시간 - MP", "출전 시간 - 선발", ...]

| 순위 | 이름  | 인구  | 순위 | 이름   | 인구  |
| 1    | 도쿄  | 3700만 | 11  | 파리  | 1100만 |
| 2    | 델리  | 3200만 | 12  | 카이로 | 1000만 |

function detectHorizontalDuplication(headers) {
  const half = Math.floor(headers.length / 2);
  if (half < 2) return null;

  const firstHalf = headers.slice(0, half);
  const secondHalf = headers.slice(half, half * 2);

  // 두 번째 절반이 첫 번째 절반과 일치하는지 확인
  const matches = firstHalf.every((h, i) => 
    h.toLowerCase() === secondHalf[i]?.toLowerCase()
  );

  if (matches) {
    return { detected: true, repeatCount: 2, baseColumns: half };
  }

  return null;
}

function normalizeHorizontallyDuplicatedTable(matrix, baseColumns) {
  const header = matrix[0].slice(0, baseColumns);
  const normalizedRows = [header];

  for (let i = 1; i < matrix.length; i++) {
    const row = matrix[i];
    // 첫 번째 절반
    normalizedRows.push(row.slice(0, baseColumns));
    // 두 번째 절반 (비어있지 않은 경우)
    const secondHalf = row.slice(baseColumns, baseColumns * 2);
    if (secondHalf.some(cell => cell.trim())) {
      normalizedRows.push(secondHalf);
    }
  }

  return normalizedRows;
}

function parseTable(table) {
  // 1. rowspan/colspan을 가상 그리드로 확장
  let matrix = expandRowspans(table);

  // 2. 네비게이션/타이틀 행 감지 및 건너뛰기
  const headerIndex = detectHeaderRowIndex(matrix);
  if (headerIndex > 0) {
    matrix = matrix.slice(headerIndex);
  }

  // 3. 그룹화된 헤더 처리 (FBREF 스타일)
  const groupedHeaders = detectGroupedColumnHeaders(matrix);
  if (groupedHeaders) {
    const mergedHeaders = mergeGroupAndSubHeaders(matrix[0], matrix[1]);
    matrix = [mergedHeaders, ...matrix.slice(2)];
  }

  // 4. 수평 복제 처리
  const duplication = detectHorizontalDuplication(matrix[0]);
  if (duplication) {
    matrix = normalizeHorizontallyDuplicatedTable(matrix, duplication.baseColumns);
  }

  return matrix;
}

// 테스트: 위키피디아 스타일 네비게이션 행
const navRowHtml = `
  <table>
    <tr><td colspan="3">v t e 국가</td></tr>
    <tr><td>순위</td><td>국가</td><td>인구</td></tr>
    <tr><td>1</td><td>중국</td><td>14억</td></tr>
  </table>
`;

const result = parseTable(parseHtml(navRowHtml));
assert(result[0][0] === "순위");  // 헤더 올바르게 식별
assert(result[1][1] === "중국");  // 데이터 올바르게 정렬