在javascript中从txt文件中读取值

时间：2013-09-14 23:09:33

标签： javascript sed

我有一个简单的html文件，其中有javascript代码引用谷歌图表。

我使用的代码就是这个（我将展示重要部分）：

function drawChart(){
    var data = google.visualization
                     .arrayToDataTable([ ['Label', 'Value'],['Temp', 22.75],]);

    // etc...
}

我使用bash命令（sed）将该22.75值替换为.txt文件最后一行的新值。然而，这会引发一些我无法纠正也无法识别的错误。

那么是否有任何javascript代码接收该文件，提取最后一个值并将其显示在代码的正确位置？

更新：

很抱歉这个问题缺乏信息，我真的很感谢花时间阅读我的问题的所有人。我会在接下来的几分钟内尝试填写更多信息。

我能够提取.txt文件的最后一行，提取“ - ”符号右侧的值并将其存储在变量中。然后使用该值来使用sed命令更新html文件。更新值但没有值时会出现错误。我想这是由于txt文件中的温度记录失败而发生的，然后提取的值为空。最后是带有javascrit代码的html fiel恰好是这样的：

（...）['Temp'，]，]）;

然后更新程序无法更新该值，因为由于sed命令的写入方式，我猜它无法检测到那里的无数值。所以html始终没有任何价值。

TXT文件结构：

（...）
20：25：03-23.312
20：26：02-23.312
20：27：03-23.375
20：28：03-23.375
20：29：02-23.375
20：30：02-23.312

Bash脚本：

# (...code...)
lastRecord=`cat /home/pi/scripts/temp_control/logs/"$today".log | awk 'END{print}'`

function rightNow {
  lastTemp=`echo $lastRecord | cut -d'-' -f2`

  timeOfTemp=`echo $lastRecord | cut -d'-' -f1` # Not used yet

  #Command used to update
  sed -i "s/['Temp', [0-9]\{1,2\}.[0-9]\{1,3\}]/$lastTemp]/" /var/www/rightnow.html
}

rightNow

3 个答案:

答案 0 :(得分：4)

你可以像任何其他ajax请求一样获取你的文件。

使用javascript 

var request = new XMLHttpRequest();
request.open('GET', 'public_path_to_file.txt', false);
request.send();

var textFileContent = request.responseText

使用jQuery 

var textFileContent;
$.get('public_path_to_file.txt', function(data) {
  textFileContent = data;
});

剩下的就是从textFileContent获得正确的部分。依赖于文件的结构，我们可以以不同的方式做到这一点。没有示例文件，您可以自己动手，但这里有一些示例。

如果您需要最后一行 

var lines = textFileContent.split("\n");
var lastLine = lines[lines.length - 1];

如果您需要使用正则表达式 

var regex = //* some regex to get your content*//gm;
var result = regex.exec(textFileContent);
// result should now the content who matches your regex

答案 1 :(得分：1)

首先，我假设您最终想要使用浏览器读取本地文件，并且您当前的工作流程类似于本地＆＃39; bash-script＆＃39;

  1. 首先更新/修改内联的javascript（在本地存储的html中） file）从本地txt文件（使用sed）检索的最后一个值（
    2. ）
  2. 在公共浏览器中打开（刚修改的html-）文件（通过命令行）。

    3. 然后我假设sed-route曾经工作但现在不再工作了（可能是因为html文件已经改变了？）现在你想要内联javascript（在html文件中）来获取来自文本文件本身的值并随后使用它（因此无需使用＆＃39; bash-script＆＃39; / sed解决方案。

    因此，答案（基于以上假设）到你的最后一个问题：＆＃39; 是否有任何javascript代码获取该文件，提取最后一个值并简单地将其显示在代码的正确位置？＆＃39;，取决于您的最终要求：
    如果您在文本输入中选择文本文件每次时查看html文件，你还好吗？

    如果你的答案是肯定的，那么，（取决于你使用的浏览器）你可以读取一个本地文件（并在其上运行你的魔法）。
    在现代浏览器中，使用File API（已添加到HTML5中的DOM），现在Web内容可以要求用户选择本地文件，然后读取这些文件的内容。

    例如，使用FireFox＆＃39; FileReader＆＃39;你可以这样做：

    HTML：

    <input type="file" id="fileinput" multiple />

    的javascript：

    function readAllFiles(evt){
    var files = evt.target.files, i = 0, r, f;
    if(files){
        for(; f = files[i++]; ){
            r = new FileReader();
            r.onload = (function(f){
                return function(e){
                    alert(e.target.result);
                };
            })(f);
            r.readAsText(f);
        }
    } else {
        alert("Error loading files");
    }
}
document.getElementById('fileinput')
        .addEventListener('change', readAllFiles, false);

    请注意，要访问Chrome中的本地文件，您必须使用此开关启动Chrome：chrome --disable-web-security

    然而，
    如果答案为否（所以你想要在代码中指定文件，更重要的是它的路径，那么你不必每次都选择文本文件你的本地应用运行的时间）然后你（通常）不能（因为你can't get/set the path，感谢伟大的制造商）...
    除非您选择一个特定的旧/未修补的浏览器（专门用于此任务），您知道（黑客）方式（无论如何）（例如IE xml vulnerability或XMLHTTP vulnerability等等...得到图片..）。

    一些替代解决方案（不要求您一遍又一遍地选择正确的文本文件）

    1. 设置一个完整的网络（LAMP）服务器（使用在aross回答中使用的XMLHttpRequest方式，但这可能感觉像是用带有大炮的蚊子射击......）
    2. 探索不同的脚本语言（但实际上仍然与现有的sed-solution相同）
    3. 结合1和2，从php中选择（最新版本包含一个小型网络服务器，您可以在需要时启动/停止它（即使在bash脚本工作流程中）或使用node.js（这是＆＃39; javascript＆＃39; 和，您可以在几行中编写/控制小型任务专用服务器。

      4. 希望这有帮助！

      <小时/> 的更新
      根据您更新的问题，评论和推荐请求，我建议您使用PHP动态获取日志txt文件中的值，并让它生成您的html代码并使用内联javascript（每次你访问页面）。

      浏览器永远不会看到php代码，只会将php插入到您的页面中（在此示例中是最后找到的值或0）。

      您要将rightnow.html文件重命名为rightnow.php并对其进行修改（如下所示）：

      <!DOCTYPE html>
<html><head>
  <!-- your header code -->

<script type="text/javascript">
//parts of your javascript

<?php                                // start php script
$logFile= '/pathToYour/logFile.log'; // <-Modify
if( $fp= @fopen($logFile, "r") ){    // if logfile succesfully opened,
    fseek($fp, -30, SEEK_END);       // set pointer 30 chars from EOF
    $val= array_pop(explode("-", rtrim(fread($fp, 30))));  //get last value
    fclose($fp);                     // close file
} 
?>                                   // end php script

function drawChart(){
  var data=google.visualization
                 .arrayToDataTable([ ['Label', 'Value'],
                                     ['Temp', <?php echo $val? $val : "0"; ?>],
                                   ]);     // ^php above inserts value or 0

  // etc...
}

//parts of your javascript
</script>

</head><body>

  <!-- your body code -->

</body></html>

      请注意，fopen与通过fseek设置文件指针并顺序fread - 从指向EOF 的指针组合不会加载完整的日志文件（60分钟* 24小时= 1440行16字节=一天结束时22.5kB）到内存（好为此目的），但只有最后30个字符（如本例所示）。

      您的日志文件和路径的变量仍然必须根据您的情况进行修改（我不知道您的$today变量的格式）。

      根据您的进一步需求，您可能希望对爆炸返回的值数组执行一些额外的检查/逻辑（而不是弹出最后一个值）。或者如何稍微修改html，以便你还可以包括最后一个温度的时间阅读等等（但是这段经过测试的代码应该让你开始并解释了以php方式运行的过程。）

      <小时/> 的更新
      既然你选择将日志文件的最后一个已知值放在文本文件中放在你的公共www-root中（我假设每天的每一分钟都有一个bash脚本？），你现在确实可以去＃ajax＆＃39;方式，由aross回答！

      但是我想暗示这里所有当前答案中的代码/解决方案可能是混合的（因为你现在也有ajax工作）：而不是ajax-ing（加载）一个txt文件，你可以有php获取和发送这个值对浏览器即时/点播！

      因此，您可以请求http://url_to_my_rpi/file_to_download.txt而不是请求http://url_to_my_rpi/read_last_temperature.PHP，它应该从日志文件中获取最后一个已知值（设置适当的安全性/访问权限）并将其发送到浏览器（设置正确的标题），就像你的文本文件一样。除了您请求的网址外，您不必更改html / javascript中的任何内容。

      优势将是（取决于您当前的bash脚本如何工作），您的PI现在只能执行此操作＆＃39;工作＆＃39; （查看日志文件的最后一个值）在查看监视器页面时。并且你不是每天每分钟都在你的www-root中写这个文件（我怀疑）。

答案 2 :(得分：0)

最终实现的解决方案是这样的：

我使用jQuery语句并重复使用 Google Charts 的javascript代码。

首先我在html文件中添加了javascript和jQuery标签：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>

然后我合并了一个脚本中的jquery代码和javascript代码：

<script type='text/javascript'>

  // Needed this var so that I could use it in other places of the code 
  var t;

  jQuery.get('http://url_to_my_rpi/file_to_download.txt',function(data){
  console.log(data)

  t=data;

  },'text');    

  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    t=eval(t);

    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Temp', t],]);

   // (... more javascript with Google Charts options, display parameters..)

</script>

最后，即使它未被列为主要问题，请务必在您的apache上启用* mod_headers *并将 Header set 添加到 apache2.conf 文件中（就我而言： /etc/apache2/apache2.conf ）

1）启用模块：

a2enmod标题

2）在配置文件中添加该行

标题集设置Access-Control-Allow-Origin“*”

3）重启apache 2

4）如果上述3个步骤无效，请输入this website或重新安装apache2，然后按照说明进行操作。

相关问题
最新问题