從字符串解析HTML元素屬性（RegExp）

Question

我只需要通過RegExp從給定的字符串獲取所有屬性和文本，如果可能的話，一行RegExp就會很棒。我想從字符串中的每個ATTR如果是「或」或獨立

• 的Attr：value = "1" or value = '1' or value="1" or value='1' or value=1 or value=""
• 的Attr：readonly or disabled

我想，這一點，但不是爲我工作

var s = '<option value="1" data-foo="Foo" readonly>Value 1</option>', m 
m = s.match(/<option ([^>]*)>(.*)<\/option>/) 
console.log(m) 
// gives ["<option value="1" data-...adonly>Value 1</option>", "value="1" data-foo="Foo" readonly", "Value 1"] 

非常感謝。

Answer 1

其實我需要這種處理用更簡單的方式「選項」的元素，更簡單的正則表達式。即使使用innerHTML = append content代替select元素，ie的Cos也不會附加。追加操作在下面的鏈接中提到，但不適用於選項元素。而且我發現這個問題的解決方案。如果附加內容是選項或選項，則使用handleOptionElements，如果不使用asyncInnerHTML。

function append(el, child) { 
    if (child.nodeType === 1 || child.nodeType === 3) { 
     // Without clone, removes element if it is copied from document 
     return el.appendChild(child.cloneNode(true)); 
    } 

    content = trim(content); 
    if (content.substring(0, 7) === "<option" && 
      content.substring(content.length - 7) === "option>") { 
     handleOptionElements(content, el); 
    } else { 
     el.innerHTML = content; 
    } 

    return el; 
} 

http://james.padolsey.com/javascript/asynchronous-innerhtml/
Ways to increase performance when set big value to innerHTML

var re_standaloneAttributes = /^(select|disabl)ed$/i, 
    re_optionSearch = /<option\s*([^>]*)>(.*?)<\/option>/gi, 
    re_attributeSearch = /([^\s]*)=["'](.*?)["']|([\w\-]+)/g; 

function handleOptionElements(content, targetElement) { 
    var options = [], attributes = [], 
     optionElement, optionElements = [], createOption; 

    (""+ content).replace(re_optionSearch, function(src1, attr, text) { 
     if (!src1) return; 
     (""+ attr).replace(re_attributeSearch, function(src2, name, value) { 
      if (!src2) return; 
      name = name || src2; 
      value = value || (value = re_standaloneAttributes.test(name) ? name : ""); 
      attributes.push({name: name, value: value}); 
     }); 
     options.push({text: text || "", attributes: attributes}); 
     // Reset attributes for each element 
     attributes = []; 
    }); 

    createOption = (function() { 
     var option = document.createElement("option"); 
     return function() { return option.cloneNode(true) }; 
    })(); 

    forEach(options, function(option) { 
     optionElement = createOption(); 
     // optionElement.text doesn't work on ie 7-8 
     optionElement.textContent = optionElement.innerText = option.text; 
     forEach(option.attributes, function(attribute) { 
      optionElement.setAttribute(attribute.name, attribute.value); 
     }); 

     if (targetElement !== undefined) { 
      targetElement.appendChild(optionElement); 
     } else { 
      optionElements.push(optionElement); 
     } 
    }); 

    return optionElements; 
} 

Answer 2

爲什麼不創建元素？

var s = '<option value="1" data-foo="Foo" readonly>Value 1</option>'​​​​​; 

var test_element = document.createElement('div'); 
test_element.innerHTML = s; 

var element = test_element.childNodes[0]; 
​var attributes = element.attributes; 

for (var i = 0; i < attributes.length; i++) { 
    var attribute = attributes[i]; 

    console.log(attribute.name, '=>', attribute.value); 
}​ 

輸出：

value => 1 
data-foo => Foo 
readonly => 

演示：http://jsfiddle.net/mcRc4/

Answer 3

下面的正則表達式，我相信獲取你想要的東西（當然，長相醜陋的人，肯定，但）

s.match(/<option\s*([^\s\=]*)\s*\=*\s*([^\s\=]*)*\s*([^\s\=]*)\s*\=*\s*([^\s\=]*)*\s*([^\s\=]*)\s*\=*\s*([^\s\=]*)*>(.*)<\/option>/);

對於s = '<option value="1" data-foo="Foo" readonly>Value 1</option>'，它返回：

[ 
    "<option value="1" data-foo="Foo" readonly>Value 1</option>", // s itlsef 
    "value", // first attr 
    ""1"", // value as written in s (with double quotes) 
    "data-foo", // second attr 
    ""Foo"", // value as written in s (with double quotes) 
    "readonly", // third attr 
    undefined, // no value specified for readonly, so undefined 
    "Value 1" // the option text 
]