javascript – 读取txt文件并放入html div标签

2019年7月21日 210次阅读

这是我的
HTML代码.我想从本地存储的* .txt文件中读取温度,并将div内容替换为从* .txt文件中读取的值.

<div class="floortitle">Temperaturen</div>
<div class='tempfield'>
    <div class='picpos'><img src='heating.gif'></div>
    <div style="position:absolute; top: 255px; left: 65px;">
        <div class='tempbox' id='Temp1'>11&deg;C</div>
    </div>
    <div style="position:absolute; top: 255px; left: 102px;">
        <div class='tempbox' id='Temp2'>12&deg;C</div>
    </div>
    <div style="position:absolute; top: 151px; left: 145px;">
        <div class='tempbox' id='Temp3'>13&deg;C</div>
    </div>
    .
    .
    . till Temp 6
    .
</div>

* .txt文件的内容如下所示.

02.10.2013;17:40:59;Temp 1;17;
02.10.2013;17:40:59;Temp 2;27;
02.10.2013;17:40:59;Temp 3;34;
02.10.2013;17:40:59;Temp 4;46;
02.10.2013;17:40:59;Temp 5;53;
02.10.2013;17:40:59;Temp 6;61;

但结果也可以从Temp 4,5,6,1,2,3开始,取决于在时间页面上进行测量时刷新.要准备* .txt文件,我使用一个简单的tail -6 originallog.txt

我认为这可以通过JavaScript完成,但是当我搜索Internet时,我总是找到结果只输出结果,而不搜索String并匹配到相应的div.

应该执行以下步骤：

>打开* .txt文件并阅读内容
>搜索Temp 1到Temp 6 – >循环使用类似document.getElementById(‘Temp $i’)的东西

最佳答案 以下是使用
regular expression和replace方法提取值的一种方法：

var tempResult={};
string.replace(/Temp (\d);(\d+)/gm,function($0,$1,$2){tempResult[$1]=$2;});

对于记录,替换不是在这里替换任何东西,只是循环遍历字符串. $1与Temp指数匹配,$2与温度匹配.

然后,您可以填充div,例如：

for (var i=1;i<7;i++) {
    document.getElementById("Temp"+i).innerHTML=tempResult[i]+"&deg;C";
}

现场演示：http://jsfiddle.net/pYB55/

点赞