所以我有一个面板,它在运行时从服务器加载一个平面文件文本聊天记录,在浏览器中每秒更新一次。它看起来像这样:
/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>
答案 0 :(得分:0)
您可以.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>
<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;
}
<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/