Question

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

/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

然后我就可以格式化#globeChat b，＃glloChat i和#globeChat u但是我想要使用CSS。

我知道如何使用PHP将文件读入数组并使用正则表达式和循环将格式化的HTML吐出来。但是如何在运行时每隔一秒（我可以使用j或Jquery制作5或者其他东西）这样做？

编辑：

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

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

Answer 1

您可以.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>

＆＃13;

<b>

＆＃13;

<i>

＆＃13;

所以我搞乱它，我无法想象如何将文件加载到函数并写入textarea而不是从textarea写入对象。

注意，无法在<textarea>元素中设置<u>，value，textarea元素的样式。 html文本的<div>，未呈现contentEditable元素。

您可以将textarea元素替换为b元素i元素，以便在容器中呈现u，success，.text()个元素用户可以编辑文本的地方。

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

您应该可以调整<div id="globeChat" contentEditable> </div>和div[contentEditable] { border:1px solid dodgerblue; }以达到预期效果

HTML

$(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;
    }
  })
});

CSS

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();

JS

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="globeChat" contentEditable>
</div>

＆＃13;

long wait = 50; // ms
boolean connected;
while (!connected) {
    Thread.sleep(wait);
    connected = <code to check connection>
    wait *= 2;
}

＆＃13;

document.getElementById('xWinCount');

＆＃13;

jsfiddle https://jsfiddle.net/ffvpuhe4/

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

1 个答案: