如何使用javascript搜索“来自本地csv文件”的单词答案

【问题标题】：How to Search a word "from a local csv file" using javascript如何使用javascript搜索“来自本地csv文件”的单词
【发布时间】：2021-05-21 00:52:09
【问题描述】：

我有 html 代码和 javascript 从帖子here 中读取表格格式（4 列）的本地文件：

我的代码：

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>

我想使用 Roko C. Buljan 在How to Search a word from a sentence in javascript 中提供的搜索 javascript

我不确定要在这个 javascript 中进行什么更改，以便它可以与我上面的搜索栏一起使用，并为整个行提供关键字。 Roko给出的javascript是：

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>");
});

我还需要更改或添加什么？有人可以指导我如何解决这个问题吗？

【问题讨论】：

你的 JavaScript 在哪里？
抱歉，我可能在写帖子的时候不小心点击了提交。

标签： javascript html

【解决方案1】：

如果你想在你的文件内容元素中搜索，那么你可以像下面那样做

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 并为不完整的帖子道歉。我希望在我输入搜索栏时同时生成表格格式的结果。您能否就如何实现这一目标提供建议？

【解决方案2】：

在您的 Javascript 代码中，尝试使用 FileReader.readAsText here。然后随心所欲地处理它。

【讨论】：