<form>
<div class="input_wrapper">
  <div class="input-label">Paste your list below, LINE SEPARATED</div>
  <textarea id="bulk_input"></textarea>
</div>
<div class="results_wrapper">
  <button type="button" id="run_sample">Sample</button>
  <button type="reset" id="reset">Reset Input</button>
  <button type="button" id="run">Get Results</button>
  <button type="button" id="run_csv">CSV</button>
</div>


<div class="output_wrapper">
  <div class="output_label">Output: </div>
  <textarea id="output" readonly></textarea>
</div>
  
</form>
.input_wrapper {
  width: 100%;
  text-align: center;
}
.results_wrapper {
  text-align: center;
  width: 100%;
  margin-top: 10px;
}
#bulk_input, #output {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  min-height: 100px;
}
button#run {
  background-color: green;
  padding: 20px;
}
button#reset {
  background-color: orange;
}
button#run_csv {
  background-color: yellow;
}
.output_wrapper {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
document.getElementById("run").addEventListener("click",function(){
  var inputValue = document.getElementById("bulk_input").value;
  getResults(inputValue);
});
document.getElementById("run_csv").addEventListener("click",function(){
  var inputValue = document.getElementById("bulk_input").value;
  getResults(inputValue,"csv");
});

document.getElementById("run_sample").addEventListener("click",function(){
  document.getElementById("bulk_input").value = "tree frog cat";
  var inputValue = document.getElementById("bulk_input").value;
  getResults(inputValue);
});

function getResults(input,OPT_Type){
  // Will hold final results
  var allPermsArray = [];
  var allPermsMdArray = [];
  var allPermsString = "";
  
  // Split input into array by line break
  var inputArray = input.split("\n");
 
  // Process each line
  for (var x=0; x<inputArray.length; x++){
    var currentLine = inputArray[x];
    var currentLinePerms = perms(currentLine.split(" "));
    for (var y=0; y<currentLinePerms.length; y++){
      var currentPerm = currentLinePerms[y].join(" ");
      allPermsArray.push(currentPerm);
      allPermsMdArray.push([currentPerm]);
      allPermsString += currentPerm + "\n";
    }
  }
  //console.log(allPermsArray);
  document.getElementById("output").value = allPermsString;
  if (OPT_Type == "csv"){
    exportToCsv("perms.csv",allPermsMdArray);
  }
}

// https://codereview.stackexchange.com/a/59621
function perms(data) {
    if (!(data instanceof Array)) {
        throw new TypeError("input data must be an Array");
    }

    data = data.slice();  // make a copy
    var permutations = [],
        stack = [];

    function doPerm() {
        if (data.length == 0) {
            permutations.push(stack.slice());
        }
        for (var i = 0; i < data.length; i++) {
            var x = data.splice(i, 1);
            stack.push(x);
            doPerm();
            stack.pop();
            data.splice(i, 0, x);
        }
    }

    doPerm();
    return permutations;
}

/* Export to CSV function courtesy of http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side/24922761#24922761 */
// the "rows" argument should be a multi-dimensional array (e.g. [["col1header","col2header"],["col1row2","col2row2"]])
function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.