使用jQuery从通过FileReader上传的html文件中提取表格

Question

I am receiving a file uploaded using FileReader() ( e.target.result ) from which I need to extract the table. From a normal html file this is easily done with $("table tbody") . Is it possible to apply this on e.target.result without appending it to my document?

I am also open to other methods other than FileReader , but if possible I'd like to use this.

JsFiddle for practice: https://jsfiddle.net/Irikos/dega00u2/

Answer 1

You can use the DOMParser for this. Just pass it your string with the type and it will give you an object you can treat the same way you treat the DOM. For example:

reader.onload = function() {
        parser=new DOMParser();
        var doc = parser.parseFromString(this.result, "text/html")
        // assumes table has some data element
        alert(doc.getElementById('data').innerHTML);
};

There's some docs here: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

[See also: https://api.jquery.com/jquery.parsehtml/]

Answer 2

I hope I understood what you're trying to do correctly, if you're getting the contents of the uploaded file as text, you can search that text directly and get the html tables from it using the following javascript lines:

var pattern = /(<table)([\s\S]+?)(\/table>)/gim
var theTablesInAnArray = e.target.result.match(pattern);