格式化由 javascript 加载的文本文件

Formatting text file loaded by javascript

本文关键字：文本 文件 加载 javascript 格式化      更新时间：2023-09-26

所以我有一个面板，它在运行时从服务器加载一个平面文件文本聊天日志，该日志在浏览器中每秒更新一次。 它看起来像这样：

/

chat/Chat_yyyy-mm-dd.log

23:25:10 : Global: Colin Fox: testing
23:25:19 : Direct: Colin Fox: testing
23:25:23 : Direct: Martinez Soto: test
23:25:29 : Global: Martinez Soto: test

现在，我在JS将文本文件加载到的页面中有一个文本框：

<textarea name="globeChat" id="globeChat" cols="50" rows="8" class="form-control" style="resize:none" readonly>No messages to display!</textarea>

最后是Javascript完成工作：

<script>
    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var year = d.getFullYear();
    var file = '/chat/Chat_'+year+'-'+
        ((''+month).length<2 ? '0' : '')+month+'-'+
        ((''+day).length<2 ? '0' : '')+day+'.log';
    $(function chatText(){
        $.ajax({
            url : file,
            dataType : 'text',
            success : function(data){
                $("#globeChat").html(data);
            }
        });
        $("#globeChat").scrollTop($("#globeChat")[0].scrollHeight);
        setTimeout(chatText, 1000);
    })();
</script>

现在，我要完成的下一件事是格式化页面上的文本。 有什么方法可以用正则表达式或其他东西做到这一点吗？ 就像将日期设置为深灰色，频道基于频道名称的特定颜色（IE，红色表示全局，蓝色表示直接），然后用户名将是任何颜色，后跟消息的黑色文本。 所以它看起来像这样：

<b>23:25:10</b>  <i>Global</i>  <u>Colin Fox</u>: testing

然后我可以使用 CSS 格式化 #globeChat b、#globeChat i 和 #globeChat u。

我知道如何使用 PHP 做到这一点，方法是将文件读入数组并使用正则表达式和循环用格式化的 HTML 将其吐出。 但是我如何使用javascript/Jquery在运行时每秒做到这一点（如果需要，我可以将其设置为5或其他东西）？

编辑：

由于它们都不起作用，我最终创建了一个聊天.php页面。 并有一个 $_GET 来定义日期偏移量，并使其包含文件并将其格式化到聊天中.php然后用聊天填充div.php：

<script>
    var file = "chat.php";
    $(function chatText() {
        $.ajax({
            url: file,
            dataType: "html",
            success: function(response){
                $("#todayChat").html(response);
            }
        })
        setTimeout(chatText, 1000);
    })();
</script>
你可以

利用.text()，.split() RegExp /'b'n[^$]/，/':(?='s)/; $.each() ， switch() 

var body = $("body");
$("textarea").text(function(_, text) {
  var arr = text.split(/'b'n[^$]/);
   $.each(arr, function(key, line) {
    var l = line.split(/':(?='s)/);
    $.each(l, function(index, el) {
      switch(index) {
        case 0: body.append("<b>" + el +"</b>"); break; 
        case 1: body.append("<i>" + el + "</i>"); break;
        case 2: body.append("<u>" + el + "</u>:"); break;
        case 3: body.append(el + "<br>"); break;
      }
    })
  });
  return text
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<textarea>
23:25:10 : Global: Colin Fox: testing
23:25:19 : Direct: Colin Fox: testing
23:25:23 : Direct: Martinez Soto: test
23:25:29 : Global: Martinez Soto: test
</textarea><br>
</body>

所以我弄乱了它，我不知道如何将文件加载到 函数并写入文本区域，而不是从文本区域写入 到对象。

请注意，不能在<textarea>元素中设置<b>、<i>、<u>元素的样式。textarea文本的value，而不是html元素呈现。

你可以用contentEditable属性替换<div>元素textarea以呈现b、i、u容器中的元素，用户可以在其中编辑文本。

更新后的success函数与使用.text()参数不同。 data 是返回的响应文本，要在 $.ajax() success 处解析;success的第二个参数是 textStatus 。

您应该能够调整html和js以达到预期的结果

.html

<div id="globeChat" contentEditable>
</div>

.css

div[contentEditable] {
  border:1px solid dodgerblue;
}

.js

$(function chatText() {
  $.ajax({
      url: file,
      dataType: "text",
      success: function(data) {       
        var arr = data.split(/'b'n[^$]/);
        console.log(arr, data);
        $.each(arr, function(key, line) {
            var l = line.split(/':(?='s)/);
            $.each(l, function(index, el) {
                switch (index) {
                  case 0:
                    strTxt += "<b>" + el + "</b>";
                    break;
                  case 1:
                    strTxt += "<i>" + el + "</i>";
                    break;
                  case 2:
                    strTxt += "<u>" + el + "</u>:";
                    break;
                  case 3:
                    strTxt += el + "<br>";
                    break;
                };
            });
        });
      $("#globeChat").html(strTxt).focus();
      return data;
    }
  })
});


var strTxt = "";
var data = "23:25:10 : Global: Colin Fox: testing'n" + "23:25:19 : Direct: Colin Fox: testing'n" + "23:25:23 : Direct: Martinez Soto: test'n" + "23:25:29 : Global: Martinez Soto: test";
var arr = data.split(/'b'n[^$]/);
console.log(arr, data);
$.each(arr, function(key, line) {
  var l = line.split(/':(?='s)/);
  $.each(l, function(index, el) {
    switch (index) {
      case 0:
        strTxt += "<b>" + el + "</b>";
        break;
      case 1:
        strTxt += "<i>" + el + "</i>";
        break;
      case 2:
        strTxt += "<u>" + el + "</u>:";
        break;
      case 3:
        strTxt += el + "<br>";
        break;
    };
  });
});
$("#globeChat").html(strTxt).focus();
div[contentEditable] {
  border: 1px solid dodgerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="globeChat" contentEditable>
</div>

JSFIDDLE https://jsfiddle.net/ffvpuhe4/

相关文章：