JavaScript 正則提取下劃線並轉換為輸入框：動態生成填空題

需求：識別文字中連續下劃線 ___，替換為同寬度的 <input>。

核心邏輯

function convertBlanks() {
    const container = document.getElementById('text');
    let html = container.innerHTML;
    const regex = /_+/g; // 連續下劃線
    html = html.replace(regex, (match) => {
        const len = match.length;
        // size 屬性近似字元寬度，實際寬度受字體影響，建議用 CSS ch 單位
        return ``;
    });
    container.innerHTML = html;
}

完整範例

<div id="text">
  Java填空題<br>
  1. Java是目前最廣泛的_(1個下劃線)編程語言之一。<br>
  2. Java具有簡單、__(2個下劃線)、穩定...<br>
</div>
<button onclick="convertBlanks()">生成輸入框</button>

進階：精確寬度控制

// CSS
input.blank { font-family: monospace; width: 2ch; } /* 每字元固定寬度 */
// JS
return ``;

• ch 單位 = 當前字體 "0" 字元寬度，等寬字體下精確對應字元數。
• 避免使用 size 屬性 (行為不一致)。

正則 /_+/g 配合 replace 回調函式，可靈活完成填空題轉換。