クライアント側JavaScriptコードアナライザ

Question

コードパターンを解析するためにクライアント側で使用できるJavaScriptコードアナライザはありますか？ 私は以下を見つけましたが、これは通常のテキストのためのもので、=という記号などを表示しているようです。クライアント側（JSコード）で実行できるコード分析が必要です。

function parseData() { 
 
    var rawData = document.getElementById('data').value.trim(), 
 
     result, 
 
     output = $('#output'), 
 
     table = $('table').remove(), 
 
     header, 
 
     row, 
 
     cell, 
 
     ul, 
 
     slice, 
 
     wpm = [],   
 
     wpmAvg = []; 
 

 
    output.empty(); 
 
    table.find('thead, tbody').empty(); 
 

 
    if ($('[name="format"]:checked').val() === 'text') { 
 
    // Simple text   
 
    result = analyzeText(rawData); 
 
    output.append('Word count: ' + result.count + '<br><br>Frequent words:<br>'); 
 
    ul = $('<ul>'); 
 
    _.forEach(result.frequentWords, function(value, key) { 
 
     ul.append('<li>' + value.word + ': ' + value.count + '</li>'); 
 
    }); 
 
    output.append(ul);  
 
    } 
 
    else { 
 
    // JSON 
 
    try { 
 
     data = JSON.parse(rawData); 
 
    } 
 
    catch(e) { 
 
     console.log('Error parsing JSON', e); 
 
    } 
 
    header = table.find('thead'); 
 
    body = table.find('tbody'); 
 
    row = $('<tr>'); 
 
    body.append(row); 
 
    // Loop over slices 
 
    _.forEach(data, function(value, key) { 
 
     slice = ''; 
 
     // Loop over statements 
 
     _.forEach(value, function(value, key) { 
 
     slice += value.words + ' '; 
 
     }); 
 

 
     result = analyzeText(slice); 
 

 
     addCell(slice, key); 
 

 
    }); 
 
    $.plot('#wpm', [wpm], { 
 
     xaxes: [{ 
 
     axisLabel: 'Time index (1-minute increments)', 
 
     }], 
 
     yaxes: [{ 
 
     position: 'left', 
 
     axisLabel: 'Words per minute', 
 
     }] 
 
    }); 
 
    output.append(table); 
 
    } 
 

 
    function addCell(data, index) { 
 
    var cell1, cell2, ul1, ul2, result; 
 
    cell1 = $('<td>'); 
 
    cell2 = $('<td>'); 
 
    ul1 = $('<ul>'); 
 
    ul2 = $('<ul>'); 
 
    cell1.append(ul1); 
 
    cell2.append(ul2); 
 
    row.append(cell1, cell2); 
 
    result = analyzeText(data); 
 
    header.append('<th>' + index + '</th><th class="subText">(' + result.count + ')</th>'); 
 
    wpm.push([index, result.count]); 
 
    _.forEach(result.frequentWords, function(value, key) { 
 
     ul1.append('<li>' + value.word + '</li>'); 
 
     ul2.append('<li>' + value.count + '</li>'); 
 
    }); 
 
    } 
 
} 
 

 
function analyzeText(rawData) { 
 
    var result = { 
 
    count: 0, 
 
    frequentWords: [] 
 
    }, 
 
     data = rawData.split(/[\s.,]+/g) 
 
    counts = {}, 
 
    countsArray = [], 
 
    commonWords = [ 
 
    0,1,2,3,4,5,6,7,8,9,    
 
    '-', 
 
    'a', 
 
    'about', 
 
    'function', 
 
    'object' 
 
    ]; 
 

 
    if (!data[data.length]) { 
 
    data.splice(-1, 1); 
 
    } 
 

 
    // Word count 
 
    result.count = data.length; 
 

 
    // Word frequency (filtered for common words, sorted descending by count) 
 
    for (var i = 0; i < data.length; i++) { 
 
    if (!counts.hasOwnProperty(data[i].toLowerCase())) { 
 
     counts[data[i].toLowerCase()] = 1; 
 
    } 
 
    else { 
 
     counts[data[i].toLowerCase()] += 1; 
 
    } 
 
    }  
 
    _.forEach(counts, function(value, key) { 
 
    if (commonWords.indexOf(key.toLowerCase()) === -1) { 
 
     countsArray.push({ 
 
     word: key.toLowerCase(), 
 
     count: value 
 
     }); 
 
    } 
 
    }); 
 
    countsArray = _.sortBy(countsArray, 'count').reverse();  
 
    _.forEach(countsArray, function(value, index) { 
 
    if (value.count > 1) { 
 
     result.frequentWords.push(value);    
 
    } 
 
    }); 
 

 
    return result; 
 
}

body { 
 
    font-family: arial; 
 
} 
 
table, tr, td, th { 
 
    border-collapse: collapse; 
 
    border: solid 1px #ddd; 
 
} 
 
th, td { 
 
    padding: 4px 8px;  
 
} 
 
.subText { 
 
    color:#999; 
 
    font-style: italic; 
 
} 
 
#wpm { 
 
    width:600px; 
 
    height: 400px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> 
 

 
<textarea id="data" cols="80" rows="20" placeholder="Paste text or JSON here"></textarea><br /> 
 
<label for="text"><input type="radio" name="format" checked value="text" id="text"> Simple text</label> 
 
<button type="button" onclick="parseData()">Analyze text</button> 
 
<br><br> 
 
<div id="output"></div><br><br> 
 
<div id="wpm"></div> 
 
<table> 
 
    <thead> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

https://jsfiddle.net/fxn5q8y0/6/

Answer 1

範囲内の各要素を介して単にループとその種類を検出します。ここで

簡単な例：

var analyse = function(obj){ 
 
    var results = {} 
 
    
 
    for(var b in obj) { // for each element 
 
    if(obj.hasOwnProperty(b)){ 
 
     var detectedType = (typeof obj[b]) // detect the type 
 
     if (!(detectedType in results)){ results[detectedType] = 0; } // if the type was detected for the first time, add its name to the results 
 
     
 
     results[detectedType]++; // increase the counter for the detected type 
 
    } 
 
    } 
 
    
 
    return results; 
 
} 
 

 

 

 
/** 
 
    example for a testObject 
 
**/ 
 

 
testObject = { 
 
    a: undefined, // type undefined 
 
    b: { xx: "xx", yy: 123 }, // type object 
 
    c: false, // type boolean 
 
    d: 987, // type number 
 
    e: "abc", // type string 
 
    f: Symbol("foo"), // type symbol 
 
    g: function(){}, // type function 
 
    h: "jkl", // type number 
 
    i: 654 // type number 
 
}; 
 

 
console.log(analyse(testObject));