JavaScript 獲取 HTML 自定義屬性多值：JSON 解析實戰

場景

HTML 元素包含自定義屬性 validate，值為類鍵值對字符串：name:'startDate',type:'string',notNull:false。需提取其中的 name、type、notNull 等字段。

解決方案：構造合法 JSON 並解析

原字符串非標準 JSON（鍵無引號、單引號），需轉換後用 JSON.parse 或 eval 解析。

完整代碼示例

<input id="field0001" name="field0001" 
       validate="name:'startDate',type:'string',notNull:false" value="">

<script>
// 1. 獲取屬性值
const attrStr = document.getElementById('field0001').getAttribute('validate');
// 結果: "name:'startDate',type:'string',notNull:false"

// 2. 轉換為合法 JSON 字符串
// 步驟：包裹大括號、雙引號鍵名、替換單引號為雙引號
let jsonStr = '{' + attrStr.replace(/'/g, '"') + '}';
// 結果: '{"name":"startDate","type":"string","notNull":"false"}'

// 3. 解析為對象（推薦 JSON.parse，安全）
const config = JSON.parse(jsonStr);

// 4. 使用
console.log(config.name);    // "startDate"
console.log(config.type);    // "string"
console.log(config.notNull); // "false" (字符串，需自行轉 boolean)
</script>

進階封裝：通用解析函數

/**
 * 解析類鍵值對字符串為對象
 * @param {string} str - 如 "key1:'val1',key2:'val2'"
 * @returns {Object} 解析後的對象
 */
function parseKeyValueString(str) {
    try {
        // 兼容鍵無引號、單雙引號混用、值為數字/布爾/字符串
        const jsonStr = '{' + str
            .replace(/(['"]?)([a-zA-Z0-9_]+)\1\s*:\s*/g, '"$2":') // 鍵加雙引號
            .replace(/'/g, '"') + '}'; // 單引號轉雙引號
        return JSON.parse(jsonStr);
    } catch (e) {
        console.error('解析失敗:', str, e);
        return {};
    }
}

// 使用
const config = parseKeyValueString(attrStr);

替代方案：data-* 屬性與 dataset

現代 HTML5 推薦使用 data-* 屬性，自動解析為 dataset 對象：

<input id="field" 
       data-name="startDate" 
       data-type="string" 
       data-not-null="false">

<script>
const el = document.getElementById('field');
// 直接訪問，自動轉駝峰命名
console.log(el.dataset.name);      // "startDate"
console.log(el.dataset.type);      // "string"
console.log(el.dataset.notNull);   // "false" (字符串)
</script>

總結

對於非標準格式的自定義屬性，字符串預處理 + JSON.parse 是安全通用的方案。新項目建議直接使用 data-* 屬性，享受瀏覽器原生解析與類型轉換便利。