-1

I have the html code and javascript to read a local file in table format (4 columns) from a post here:

My code: 

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.target.files || evt.dataTransfer.files; // FileList object.
  var file = files[0];

  // this creates the FileReader and reads stuff as text
  var fr = new FileReader();
  fr.onload = parse;
  fr.readAsText(file);

  // this is the function that actually parses the file
  // and populates the table
  function parse() {
    var table = document.getElementById('emps');
    var employees = fr.result.split('\n');
    var c = 0;
    for (var i in employees) {
      var employee = employees[i].split(',');
      if (employee.length == 4) {
        var row = document.createElement('tr');
        row.innerHTML = "<td>" + employee.join("</td><td>") + "</td>";
        table.appendChild(row);
        c++;
      }
    }
    document.getElementById('result').innerHTML = '<span>Added ' + c + ' results from file: ' + file.name + '</span>';
  }
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}


// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

document.getElementById('files').addEventListener('change', handleFileSelect, false);
<div id="container">
  <div id="drop_zone"><span id="drop_text">Drop file here</span></div>
  <div id="selector">Or select file: <input id="files" multiple="multiple" name="files[]" type="file" /></div>
  <p>Search keyword</p>
  <p><input id="searchbar" spellcheck="true" type="text" /></p>
  <h3>Results</h3>
</div>
<p><br /><br /><br /><br /></p>
<table id="emps"></table>
<div id="result"></div>

which I would like to work with the search javascript given by Roko C. Buljan in How to Search a word from a sentence in javascript

I'm not sure what to change in this javascript so that it works with the searchbar I have above plus giving the entire row with the keyword. The javascript given by Roko is:

var string = document.getElementById("str").innerHTML;
var elDemo = document.getElementById("demo");

function getPortions(queryString, string) {
    var results = [];
    if (queryString.length > 0) {
        var rgxp = new RegExp("(\\S*)?(" + queryString + ")(\\S*)?", "ig");
        string.replace(rgxp, function (match, $1, $2, $3) {
            results.push(($1 || "") + "<b>" + $2 + "</b>" + ($3 || ""));
        });
    }
    return results;
}

document.getElementById("txt1").addEventListener("input", function () {
    var result = getPortions(this.value, string);
    elDemo.innerHTML =
        "Found " + result.length + " results<br>" + result.join("<br>");
});

What else do I need to change or add? Can someone guide me how to fix this?

Daweed
  • 1,419
  • 1
  • 9
  • 24
Catalyst
  • 426
  • 3
  • 12

2 Answers2

0

If you want to search in your file-content element then you can do it like below

var src_str = $("#file-content").text();
var term = $("#searchbar").val();
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "gi");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
$("#file-content").html(src_str);

http://jsfiddle.net/UPs3V/291/

Tansukh Rathod
  • 90
  • 5
  • Thanks for your response, Tansukh and my apology for an incomplete post. I'm hoping to generate the result in a table format simultaneously when I type in the searchbar. Would you be able to give advices on how this may be achieved? – Catalyst Feb 19 '21 at 01:40
0

In your Javascript code, try using FileReader.readAsText here. Then handle it as you want.

Danny
  • 883
  • 8
  • 33