Fatal编程技术网
  • javascript/
  • Javascript读取txt文件中的特定行并为其分配id

Javascript读取txt文件中的特定行并为其分配id

javascript jquery html twitter-bootstrap

Javascript读取txt文件中的特定行并为其分配id,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有一个这样的文本文件结构 我使用下面的代码来读取txt文件 <head> <script type="text/javascript"> function readfileautomatically(); </script> </head> <body> <body onload="readfileautomatically();"> <td id="foo"></td> <

我有一个这样的文本文件结构

我使用下面的代码来读取txt文件

<head>
<script type="text/javascript">
    function readfileautomatically();
</script>
</head>

<body>
<body onload="readfileautomatically();">

<td id="foo"></td>



<script>
function readfileautomatically () {

var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
alert(client.responseText);
       }
client.send();

}

</script>
</body>


函数readfileautomatically（）；
函数readfileautomatically（）{
var client=new XMLHttpRequest（）；
open（'GET'，'/foo.txt'）；
client.onreadystatechange=函数（）{
警报（client.responseText）；
}
client.send（）；
}
目前有了上面的内容，我可以阅读文本文件并提醒内容。我现在要扩展我的代码并执行此操作

加载页面时读取foo.txt

从txt文件id=line3分配第3行世界

从txt文件id=line1中分配第1行hello

这样我就可以做到：

<td="line3"> world from txt file will be here  </td>
<td="line1"> hello from txt file will be here  </td>
来自txt文件的世界将在这里 来自txt文件的hello将出现在这里
如果您能提供任何帮助，我们将不胜感激。

要将文件拆分为行，您可以尝试
String\split
方法，按
\n
字符（换行符）拆分。这将为您提供一个行数组

例如：

var text = client.responseText;
var lines = text.split("\n"); // create array of lines
document.getelementById("line3").innerHTML = lines[2]; // Arrays start at zero
document.getelementById("line1").innerHTML = lines[0];

您必须拆分新行字符上的文本，并遍历数组。提防

如果您有任何问题，请告诉我：）


函数readfileautomatically（）{
var client=new XMLHttpRequest（）；
open（'GET'，'/foo.txt'）；
client.onreadystatechange=函数（）
{
如果（client.responseText！=''）
{
var txt=client.responseText.split（“\n”）；
document.getElementById（“line1”）.innerHTML=txt[0]；
document.getElementById（“line3”）.innerHTML=txt[2]；
}
}
client.send（）；
}
尝试调用
.split（）
和参数
RegExp
/\b/
，利用
for
循环迭代生成的数组，如果数组的索引为
0
：
“Hello”
，
2
：
“world”


函数readfileautomatically（）{
var client=new XMLHttpRequest（）；
client.open（“GET”，“/foo.txt”）；
client.onload=函数（）{
var tr=document.querySelector（“表tr”）；
var res=this.responseText.split（/\b/）；
var text=“来自txt文件将在此处”；
对于（变量i=0；i
jshiddle

使用此js：

function/**/（）{
var client=new XMLHttpRequest（）；
client.open（'GET'，'/'）；
client.onreadystatechange=函数（）
{
var txt=client.responseText.split（“\n”）；
document.getElementById（“/**/”）.innerHTML=txt[]；
/**/
}
client.send（）；

}
当您可以使用正则表达式或
\n
进行拆分时，您为什么要
编码URI
和
解码URI
？ 
var text = client.responseText;
var lines = text.split("\n"); // create array of lines
document.getelementById("line3").innerHTML = lines[2]; // Arrays start at zero
document.getelementById("line1").innerHTML = lines[0];

var text = 'Hello\n.\nworld\n.\n.\n.\n.\nits me';

var lines = text.split('\n');
lines.forEach(function (line, i) {
    if (line) {
        var div = document.createElement('div');    
        div.id = 'line' + (i + 1);
        div.innerHTML = line;
        document.body.appendChild(div);
    }

    console.log('%d: %s', i, line);
});

<html>
<head>
</head>
<body onload="readfileautomatically();">

<div id="line1"></div>
<div id="line3"></div>

<script>
    function readfileautomatically () {
        var client = new XMLHttpRequest();
        client.open('GET', '/foo.txt');
        client.onreadystatechange = function()
        {
            if( client.responseText != '' )
            {
                var txt = client.responseText.split("\n");
                document.getElementById("line1").innerHTML = txt[0];
                document.getElementById("line3").innerHTML = txt[2];
            }
        }
        client.send();
    }
</script>
</body>
</html>

<script>
    function readfileautomatically() {
        var client = new XMLHttpRequest();
        client.open("GET", "/foo.txt");
        client.onload = function() {
            var tr = document.querySelector("table tr");
            var res = this.responseText.split(/\b/);
            var text = " from txt file will be here";
            for (var i = 0; i < res.length; i++) {
                if (i === 0) {
                    var elem = document.createElement("td");
                    elem.id = "line" + 1;
                    elem.innerHTML = res[i] + text;
                    tr.appendChild(elem);
                } else if (i === 2) {
                    var elem = document.createElement("td");
                    elem.innerHTML = res[i].toLowerCase() + text;
                    elem.id = "line" + i;
                    tr.insertBefore(elem, tr.lastChild)
                }
            }
        }
        client.send();   
    }
</script>
<body onload="readfileautomatically();">
    <table>
        <tbody>
            <tr>
                <td id="foo">foo</td>
            </tr>
        </tbody>
    </table>
</body>