我在jsFiddle中有一个简单的HTML页面,它应该打开.txt日志文件:
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
};
reader.readAsText(input.files[0]);
};
var status = '<h2><br/><center>I want to change the colour of the >>> @ <<< symbol</center></h2>',
newStatus = status.replace(/@/g, '<span class="atSign">@</span>');
console.log(newStatus);
document.getElementById('output').innerHTML = newStatus;
.atSign {
color: #f90;
}
<center>
<h1>.TXT Log Parser</h1>
</center>
<center>
<h2><input type='file' accept='text/plain' onchange='openFile(event)'></h2>
</center>
<br/>
<div id='output'>...</div>
链接到JSFiddle项目:
https://jsfiddle.net/baivong/60py489j/
正如您在示例中所看到的,我可以将输出作为文本读取,我甚至可以使用一些JS和CSS来更改特定字符串中特定字符的颜色。
由于.txt日志的内容不在我的html或js中,你如何建议我在#output中突出显示内容?
答案 0 :(得分:0)
在onload
函数中,您需要将text
替换为格式化的HTML。
注意不要将上传的文本作为字符串替换的HTML单独插入;这将允许执行任意脚本(和其他东西)。相反,请将文本拆分为@
s,并在每个细分(最后一个除外)之后附加样式span
。
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var output = document.getElementById('output');
const lines = text.split('\n');
lines.forEach((line) => {
const div = output.appendChild(document.createElement('div'));
const textSplitAroundAt = line.split('@');
textSplitAroundAt.forEach((text, i) => {
div.appendChild(document.createTextNode(text));
if (i === textSplitAroundAt.length - 1) return;
const span = div.appendChild(document.createElement('span'));
span.textContent = '@';
span.className = 'atSign';
});
});
};
reader.readAsText(input.files[0]);
};
.atSign {
color: #f90;
}
<center>
<h1>.TXT Log Parser</h1>
</center>
<center>
<h2><input type='file' accept='text/plain' onchange='openFile(event)'></h2>
</center>
<br/>
<div id='output'>...</div>