从文件中读取行并在youtube嵌入我的网站时导入

Question

I want to know how to read text file and get the information to a javascript code. What I mean is,

If I have text file contained with youtube Video-ID and Title

ID:youtubeVideoID1 "Title1" ID:youtubeVideoID2 "Title2" ID:youtubeVideoID3 "Title3" ID:youtubeVideoID4 "Title4"

for example: ID:gsjtg7m1MMM "X-Man Trailer!"

I want that my web (Index.html) will read the text-file's lines 1 by 1 ,by order, and show me on my web embed of youtube videos like this:

<a href="https://www.youtube.com/watch?v=(VIDEOID FROM TEXT FILE)" title="(TITLE FROM THE TEXT FILE)"><img width="143" alt="(TITLE)" src="http://img.youtube.com/vi/(VIDEO_ID)/hqdefault.jpg" ></a>

It need to read and show only the lines that start with "ID:" and the first word after ID is the VIDEO_ID (so it should be a VAR) and after "space" comes the "TITLE" (and it can be a few words in some language) should be a var also..

so If I have only 5 rows in the text file with ID + TITLE, it will show me on the page, only 5 embed videos... and if there is more, then more...

and if its javascript, what code I need to write on the web so it will show?

Thank You! hope someone will help me with that..

Answer 1

This seems relatively simple.

First off we need to read the txt file:

function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
    if(rawFile.readyState === 4)
    {
        if(rawFile.status === 200 || rawFile.status == 0)
        {
            var allText = rawFile.responseText;
            return allText;
        }
    }
}
rawFile.send(null);
}

var txt = readTextFile("path/to/txt/file.txt");

Then we need to parse the file, so assuming the file looks like above we could do it like this:

var split_txt = txt.split("ID:");
for(var i=0;i<split_txt.length;i++){
    var id = split_txt[i].split(" \"")[0];
    var title = split_txt[i].split(" \"")[1].slice(0,-1);
    $("body").append("<a href=\"https://www.youtube.com/watch?v="+id+"\" title=\""+title+"\"><img width=\"143\" alt=\""+title+"\" src=\"http://img.youtube.com/vi/"+id+"/hqdefault.jpg\" ></a>");
}

You will require jQuery to run it.