1

RegExp を介して指定された文字列からすべての属性とテキストを取得する必要があるだけです。1 行で可能であれば、RegExp は素晴らしいでしょう。" または ' またはスタンドアロンの場合、文字列から各属性を取得したい。

  • 属性:value = "1" or value = '1' or value="1" or value='1' or value=1 or value=""
  • 属性: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"]

どうもありがとう。

4

3 に答える 3

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/

于 2012-12-14T08:19:13.320 に答える
0

次の正規表現は、あなたが望むものを取得すると信じています（まあ、確かに醜く見えますが）

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
]
于 2012-12-14T08:26:47.713 に答える
0

実際には、より単純な方法、より単純な正規表現で「オプション」要素を処理するためにこれが必要でした。要素に使用innerHTML = append contentする場合、ie の Cos は追加されません。select追加操作は以下のリンクに記載されていますが、オプション要素では機能しません。そして、この問題の解決策を見つけます。追加コンテンツがオプションである場合、または使用よりもオプションが使用さ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/
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;
}
于 2012-12-16T02:54:05.247 に答える