2014-02-13 79 views
0

好了,我的代碼從另一個帖子這真棒位:字符串格式自定義的方法擴展

String.prototype.format = function (values) { 

    var regex = /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g; 

    var getValue = function (key) { 
     if (values == null || typeof values === 'undefined') return null; 

     var value = values[key]; 
     var type = typeof value; 

     return type === 'string' || type === 'number' ? value : null; 
    }; 

    return this.replace(regex, function (match) { 
     //match will look like {sample-match} 
     //key will be 'sample-match'; 
     var key = match.substr(1, match.length - 2); 

     var value = getValue(key); 

     return value != null ? value : match; 
    }); 
}; 

,如果你看看我的JSON對象,它看起來像這樣:

{ 
    "Id":4019, 
    "FileName":"2013-08-24 15.00.15.jpg", 
    "ThumbNail":"http://d49aa22b-3476-4fac-8bef-38f53f9378f3.s3.amazonaws.com/2013-08-24 15.00.15_thumb.png", 
    "DisplayName":"2013-08-24 15.00.15.jpg", 
    "CompanyId":"D49AA22B-3476-4FAC-8BEF-38F53F9378F3", 
    "CreatedById":"76026710-ad16-4533-b5fc-47ddd5ab415b", 
    "Type":3, 
    "DateCreated":"2014-02-11T18:23:07.047", 
    "DateModified":"2014-02-11T23:22:31.393", 
    "LanguageId":1, 
    "Converted":true, 
    "Status":1, 
    "IsPublic":false, 
    "ModifiedById":"132CD2AE-C942-40DA-897E-3D6C5DCB7963", 
    "Language":null, 
    "Metadata":{ 
     "AssetId":4019, 
     "ReferenceId":"cc68d994c957c0a4", 
     "Tags":null, 
     "Description":null, 
     "Filename":null, 
     "FileSize":"1566 kB", 
     "FileType":"JPEG", 
     "MIMEType":"image/jpeg", 
     "CreateDate":"", 
     "ModifyDate":"2013:08:24 15:00:15", 
     "AddedDate":null, 
     "AudioBitRate":null, 
     "SampleRate":null, 
     "ChannelMode":null, 
     "Duration":null, 
     "Track":null, 
     "Album":null, 
     "Year":null, 
     "Title":null, 
     "Genre":null, 
     "Band":null, 
     "Composer":null, 
     "Artist":null, 
     "VideoFrameRate":null, 
     "VideoCodec":null, 
     "ImageWidth":2448, 
     "ImageHeight":3264, 
     "ImageSize":"2448x3264", 
     "XResolution":null, 
     "YResolution":null, 
     "ResolutionUnit":null, 
     "Orientation":null 
    }, 
    "Company":null, 
    "CreatedBy":null, 
    "ModifiedBy":null, 
    "Comments":null, 
    "Ratings":null, 
    "Categories":null, 
    "Collections":null, 
    "SynchronisedAssets":null 
} 

現在,如果我用我的功能是這樣的(項目是JSON):

var rowTemplate = "<tr data-id=\"{Id}\"><td>{FileName}</td><td>{FileSize}</td><td></td><td><button type=\"button\" class=\"close\" data-id=\"{Id}\" aria-hidden=\"true\">&times;</button></td></tr>"; 
var row = rowTemplate.format(item); 

我得到返回的輸出是這樣的:

<tr data-id="4019"><td>2013-08-24 15.00.15.jpg</td><td>{FileSize}</td><td></td><td><button type="button" class="close" data-id="4019" aria-hidden="true">&times;</button></td></tr> 

的問題(如果你已不能看到它:d)是我想要得到的文件大小顯示了,但是那是在一個嵌套的JSON對象。 任何人都可以告訴我如何讓我的功能與該工作?

我試過{} Metadata.FileSize但這並沒有與量變到質變的正則表達式的支持點(這樣Metadata.FileSize將匹配),如工作,要麼:(

回答

1

開始:

/\{([\w-.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g 

然後你「會需要找到值,例如:

var getValue = function (key) { 
    var value = values, 
     arr, type; 

    if (values == null || typeof values === 'undefined') return null; 

    if (key.indexOf('.')) { 
     arr = key.split('.'); 

     while (arr.length && value) { 
      value = value[arr.shift()]; 
     } 
    } else { 
     value = val && val[key] || values[key]; 
    } 

    type = typeof value; 

    return type === 'string' || type === 'number' ? value : null; 
}; 

工作例如:http://jsfiddle.net/tdLKc/


或者用reduce,如:

var getValue = function (key) { 
    var value = values, 
     arr, type; 

    if (values == null || typeof values === 'undefined') return null; 

    if (key.indexOf('.')) { 
     arr = key.split('.'); 

     value = arr.reduce(function(a, b){ 
      return a[b]; 
     }, values); 

    } else { 
     value = val && val[key] || values[key]; 
    } 
    type = typeof value; 

    return type === 'string' || type === 'number' ? value : null; 
}; 

工作實施例:http://jsfiddle.net/tdLKc/1/

1

String.prototype.format =函數(值){

var regex = /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g; 

if (values == null || typeof values === 'undefined') return; 

var getValue = function (key) 
    { 
    var i, l, value, type, referrer; 

    if (key.indexOf (".")>-1) 
     { 
     key=key.split("."); 
     l=key.length; 
     referrer=values; 
     for (i=0;i<l;i++) 
     referrer=referrer[key[i]]; 
     value=referrer; 
     } 
    else 
     value = values[key]; 
    type = typeof value; 

    return type === 'string' || type === 'number' ? value : null; 
}; 

return this.replace(regex, function (match) { 
    //match will look like {sample-match} 
    //key will be 'sample-match'; 
    var key = match.substr(1, match.length - 2); 

    var value = getValue(key); 

    return value != null ? value : match; 
}); 

};

0

這是我的解決方案,我定義了它使數據正確和更高效的路徑。

var rowTemplate = "<tr data-id=\"{Id}\"><td>{FileName}</td><td>{Metadata.FileSize}</td><td></td><td><button type=\"button\" class=\"close\" data-id=\"{Id}\" aria-hidden=\"true\">&times;</button></td></tr>"; 

和編輯格式的痘痘:

String.prototype.format = function (values) { 

var regex = /\{([\w-.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g ; 

var getValue = function (key) { 
    if (values == null || typeof values === 'undefined') return null; 

    var keydata = key.split('.'); 
    var data, type 
     ,num = keydata.length;   


    while(keydata.length){ 
     value = (num == keydata.length) 
     ? values[keydata.shift()] 
     : value[keydata.shift()];    
    }  
     type = typeof value; 

    return type === 'string' || type === 'number' ? value : null; 
    }; 

return this.replace(regex, function (match) { 
    //match will look like {sample-match}   
    //key will be 'sample-match'; 
    console.log('match',match); 
    var key = match.substr(1, match.length - 2); 

    var value = getValue(key); 

    return value != null ? value : match; 
    }); 
}; 

原因中的對象,你可以有相同的鍵名,唯一的辦法幫助你避免它的設計目標格式沒有任何attrs的名字是一樣的。它可能會變成一些噩夢,如:{a:{b:{'FileSize':'hell year'}}} 。在您的JSON中,我看到2個attrs具有相同的名稱,但您通過小寫字母(文件* N * ame和文件* n * ame),你是爲了避免錯誤attrs,不是嗎?

jsfiddle:http://jsfiddle.net/scX3f/1/ 對不起我可怕的英語,如果它打擾你:)。