Выделил конкретную строку внутри div - PullRequest
Новая
       23

Выделил конкретную строку внутри div

0 голосов
/ 07 мая 2018

У меня есть простая HTML-страница в jsFiddle, которая должна открывать файлы журнала .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?

1 Ответ

0 голосов
/ 07 мая 2018

В функции onload необходимо заменить text на отформатированный HTML.

Старайтесь не вставлять загруженный текст в виде HTML-кода с заменой строк; это позволит выполнять произвольные сценарии (и другие вещи). Вместо этого разделите текст на @ с и добавьте стиль 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>
...