1

私はstackoverflowで多くのことを検索し、次のような非常に興味深いものを見つけました:

スパン属性の正規表現を作成するには?

そして 、テキスト div と < を置き換える JavaScript 正規表現。>

しかし、div を data-type 属性に置き換え、文字列から data-type 属性を削除するという目標を実際に解析できなかったことがわかりました。

これが私がした方法です。

//Doesn't work with multi lines, just get first occurrency and nothing more.
// Regex: /\s?data\-type\=(?:['"])?(\d+)(?:['"])?/

var source_code = $("body").html();

var rdiv = /div/gm; // remove divs
var mxml = source_code.match(/\S?data\-type\=(?:['"])?(\w+)(?:['"])?/);
var rattr =source_code.match(/\S?data\-type\=(?:['"])?(\w+)(?:['"])/gm);
var outra = source_code.replace(rdiv,'s:'+mxml[1]);
var nestr = outra.replace(rattr[0],'');// worked with only first element
console.log(nestr);
console.log(mxml);
console.log(rattr);

この HTML サンプル ページについて

<div id="app" data-type="Application">
    <div data-type="Label"></div>
     <div data-type="Button"></div>
     <div data-type="VBox"></div>
     <div data-type="Group"></div>
</div>

その特定のことについて何か光がありますか？何かが足りないかもしれませんが、本当に手がかりがありません。それ以外の場合はここで尋ねてください。

表示する jsFiddle を作成しました。ブラウザのコンソールを開いて、結果を確認してください。

http://jsfiddle.net/uWCjV/

jsfiddle または私の正規表現のより良い説明について自由に答えてください。なぜ失敗するのですか。

フィードバックが得られるまで、テキストを置き換えることができるかどうかを確認し続けます.

前もって感謝します。

4

1 に答える 1

0

おそらく、マークアップを解析してオブジェクトのツリーにしてから、それを MXML に変換する方が簡単でしょう。

このようなもの：

var source_code = $("body").html();

var openStartTagRx = /^\s*<div/i;
var closeStartTagRx = /^\s*>/i;
var closeTagRx = /^\s*<\/div>/i;
var attrsRx = new RegExp(
    '^\\s+' +
    '(?:(data-type)|([a-z-]+))' +    // group 1 is "data-type" group 2 is any attribute
    '\\=' +
    '(?:\'|")' +
    '(.*?)' +                        // group 3 is the data-type or attribute value
    '(?:\'|")',
    'mi');


function Thing() {
    this.type = undefined;
    this.attrs = undefined;
    this.children = undefined;
}

Thing.prototype.addAttr = function(key, value) {
    this.attrs = this.attrs || {};
    this.attrs[key] = value;
};

Thing.prototype.addChild = function(child) {
    this.children = this.children || [];
    this.children.push(child);
};


function getErrMsg(expected, str) {
    return 'Malformed source, expected: ' + expected + '\n"' + str.slice(0,20) + '"';
}


function parseElm(str) {

    var result,
        elm,
        childResult;

    if (!openStartTagRx.test(str)) {
        return;
    }
    elm = new Thing();
    str = str.replace(openStartTagRx, '');

    // parse attributes
    result = attrsRx.exec(str);
    while (result) {
        if (result[1]) {
            elm.type = result[3];
        } else {
            elm.addAttr(result[2], result[3]);
        }
        str = str.replace(attrsRx, '');
        result = attrsRx.exec(str);
    }

    // close off that tag
    if (!closeStartTagRx.test(str)) {
        throw new Error(getErrMsg('end of opening tag', str));
    }
    str = str.replace(closeStartTagRx, '');

    // if it has child tags
    childResult = parseElm(str);
    while (childResult) {
        str = childResult.str;
        elm.addChild(childResult.elm);
        childResult = parseElm(str);
    }

    // the tag should have a closing tag
    if (!closeTagRx.test(str)) {
        throw new Error(getErrMsg('closing tag for the element', str));
    }
    str = str.replace(closeTagRx, '');
    return {
        str: str,
        elm: elm
    };
}


console.log(parseElm(source_code).elm);

jsフィドル

これにより、指定したマークアップが次のように解析されます。

{ 
  "type" : "Application"
  "attrs" : { "id" : "app" },
  "children" : [
    { "type" : "Label" },
    { "type" : "Button" },
    { "type" : "VBox" },
    { "type" : "Group" }
  ],
}

これは再帰的であるため、埋め込まれたグループも解析されます。

于 2013-07-28T10:51:15.120 に答える