Назад Зміст

Підсвітка тексту за кнопками

const patterns = {
  date: /\b\d{1,2}[./-]\d{1,2}[./-]\d{2,4}\b/g,
  phone: /\+?\d[\d\s\-\(\)]{7,}\d/g,
  url: /https?:\/\/[^\s]+/g,
  number: /\b\d+\b/g,
  capital: /(^|[^А-Яа-яЁёЇїІіЄєҐґA-Za-z0-9_])([A-ZА-ЯЁЇІЄҐ][a-zа-яёіїєґA-Za-z]*)(?=[^А-Яа-яЁёЇїІіЄєҐґA-Za-z0-9_]|$)/g
};

const classes = {
  date: 'highlight-date',
  phone: 'highlight-phone',
  url: 'highlight-url',
  number: 'highlight-number',
  capital: 'highlight-capital'
};

let originalText = document.getElementById("inputText").value;

function escapeHtml(text) {
  return text.replace(/[&<>]/g, tag => ({ "&": "&", "<": "<", ">": ">" }[tag]));
}

function highlight(type) {
  let text = escapeHtml(document.getElementById("inputText").value);
  let regex = patterns[type];
  let cls = classes[type];

  // Для capital зберігаємо групу p2
  if(type === 'capital'){
    text = text.replace(regex, (match, p1, p2) => {
      return p1 + '<span class="'+cls+'">'+p2+'</span>';
    });
  } else {
    text = text.replace(regex, (match) => `<span class="${cls}">${match}</span>`);
  }

  document.getElementById("output").innerHTML = text;
}

function resetText() {
  document.getElementById("inputText").value = originalText;
  document.getElementById("output").innerHTML = escapeHtml(originalText);
}

// Завантаження тексту з файлу
document.getElementById("fileInput").addEventListener("change", function(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    const content = e.target.result;
    document.getElementById("inputText").value = content;
    originalText = content;
    document.getElementById("output").innerHTML = escapeHtml(content);
  };
  reader.readAsText(file, "UTF-8");
});

// Відобразити текст спочатку без підсвітки
window.onload = function() {
  document.getElementById("output").innerHTML = escapeHtml(originalText);
};