Membina Editor Pintar: Mengesan URL Secara Automatik dan Menukarkannya kepada Hiperpautan

Ini adalah idea yang saya hasilkan di tempat kerja untuk meningkatkan pengalaman pengguna. Ia melibatkan pelaksanaan kotak teks yang secara automatik mengesan URL dan menukarnya menjadi hiperpautan sebagai jenis pengguna (Kod sumber Github/AutolinkEditor). Ciri hebat ini agak sukar untuk dilaksanakan dan isu berikut mesti ditangani.

• Kesan dengan tepat URL dalam teks
• Kekalkan kedudukan kursor selepas menukar rentetan URL menjadi hiperpautan
• Kemas kini URL sasaran dengan sewajarnya apabila pengguna mengedit teks hiperpautan
• Kekalkan pemisah baris dalam teks
• Sokongan menampal teks kaya sambil mengekalkan kedua-dua teks dan pemisah baris, dengan gaya teks sepadan dengan format kotak teks.

...
 if(target && target.contentEditable){
  ...
  target.contentEditable = true;
  target.focus();
 }
...

Penukaran didorong oleh acara "onkeyup" dan "onpaste". Untuk mengurangkan kekerapan penukaran, mekanisme kelewatan dilaksanakan dengan "setTimeout", di mana logik penukaran dicetuskan hanya selepas pengguna berhenti menaip selama 1 saat secara lalai.

idle(func, delay = 1000) {
      ...
      const idleHandler = function(...args) {
        if(this[timer]){
          clearTimeout(this[timer]);
          this[timer] = null;
        }
        this[timer] = setTimeout(() => {
          func(...args);
          this[timer] = null;
        }, delay);

      };
      return idleHandler.bind(this);
    }

Kenal pasti dan ekstrak URL dengan ungkapan biasa

Saya tidak berhasrat untuk menghabiskan masa mencipta regex yang sempurna untuk memadankan URL, jadi saya menemui URL yang boleh digunakan melalui enjin carian. Jika sesiapa mempunyai yang lebih baik, sila beritahu saya!

...
const URLRegex = /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+))(:\d+)?(\/.*)?(\?.*)?(#.*)?$/;
const URLInTextRegex = /(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+))(:\d+)?(\/.*)?(\?.*)?(#.*)?/;
...

if(URLRegex.test(text)){
  result += `<a href="${escapeHtml(text)}">${escapeHtml(text)}</a>`;
}else {
  // text contains url
  let textContent = text;
  let match;
  while ((match = URLInTextRegex.exec(textContent)) !== null) {
    const url = match[0];
    const beforeUrl = textContent.slice(0, match.index);
    const afterUrl = textContent.slice(match.index + url.length);

    result += escapeHtml(beforeUrl);
    result += `<a href="${escapeHtml(url)}">${escapeHtml(url)}</a>`;
    textContent = afterUrl;
  }
  result += escapeHtml(textContent); // Append any remaining text
}

Memulihkan kedudukan kursor selepas penukaran

Dengan document.createRange dan window.getSelectionfunctions, kira kedudukan kursor dalam teks nod. Memandangkan menukar URL kepada hiperpautan hanya menambah teg tanpa mengubah suai kandungan teks, kursor boleh dipulihkan berdasarkan kedudukan yang direkodkan sebelum ini. Untuk butiran lanjut, sila baca Tidak dapat memulihkan pilihan selepas HTML diubah suai, walaupun ia adalah HTML yang sama.

Kemas kini atau alih keluar semasa mengedit hiperpautan
Kadangkala kami membuat hiperpautan dengan teks dan URL sasaran adalah sama (dipanggil 'hiperpautan mudah' di sini). Contohnya, HTML berikut menunjukkan hiperpautan jenis ini.

http://www.example.com
Untuk pautan sedemikian, apabila teks hiperpautan diubah suai, URL sasaran juga harus dikemas kini secara automatik untuk memastikannya sentiasa disegerakkan. Untuk menjadikan logik lebih mantap, pautan akan ditukar kembali kepada teks biasa apabila teks hiperpautan bukan lagi URL yang sah.

handleAnchor: anchor => {
  ...
    const text = anchor.textContent;
    if(URLRegex.test(text)){
      return nodeHandler.makePlainAnchor(anchor);
    }else {
      return anchor.textContent;
    }
  ...
}
...
makePlainAnchor: target => {
  ...
  const result = document.createElement("a");
  result.href = target.href;
  result.textContent = target.textContent;
  return result;
  ...
}

Untuk melaksanakan ciri ini, saya menyimpan 'hiperpautan mudah' dalam objek dan mengemas kininya dalam masa nyata semasa acara onpaste, onkeyup dan onfocus untuk memastikan logik di atas hanya mengendalikan hiperpautan mudah.

target.onpaste = initializer.idle(e => {
  ...
  inclusion = contentConvertor.indexAnchors(target);
}, 0);

const handleKeyup = initializer.idle(e => {
  ...
  inclusion = contentConvertor.indexAnchors(target);
  ...
}, 1000);

target.onkeyup = handleKeyup;
target.onfocus = e => {
  inclusion = contentConvertor.indexAnchors(target);
}

...

indexAnchors(target) {
  const inclusion = {};
  ...
  const anchorTags = target.querySelectorAll('a');
  if(anchorTags) {
    const idPrefix = target.id === "" ? target.dataset.id : target.id;

    anchorTags.forEach((anchor, index) => {
      const anchorId = anchor.dataset.id ?? `${idPrefix}-anchor-${index}`;
      if(anchor.href.replace(/\/+$/, '').toLowerCase() === anchor.textContent.toLowerCase()) {
        if(!anchor.dataset.id){
          anchor.setAttribute('data-id', anchorId);
        }
        inclusion[[anchorId]] = anchor.href;
      }
    });
  }
  return Object.keys(inclusion).length === 0 ? null : inclusion;
  ...
}

Mengendalikan garis putus dan gaya

Apabila mengendalikan teks kaya yang ditampal, editor akan menggayakan teks secara automatik dengan gaya teks editor. Untuk mengekalkan pemformatan, tag
dalam teks kaya dan semua hiperpautan akan dikekalkan. Mengendalikan teks input adalah lebih kompleks. Apabila pengguna menekan Enter untuk menambah baris baharu, elemen div ditambahkan pada editor, yang digantikan oleh editor dengan
untuk mengekalkan pemformatan.

node.childNodes.forEach(child => {
  if (child.nodeType === 1) { 
    if(child.tagName === 'A') { // anchar element
      const key = child.id === "" ? child.dataset.id : child.id;

      if(inclusion && inclusion[key]){
        const disposedAnchor = handleAnchor(child);
        if(disposedAnchor){
          if(disposedAnchor instanceof HTMLAnchorElement) {
            disposedAnchor.href = disposedAnchor.textContent;
          }
          result += disposedAnchor.outerHTML ?? disposedAnchor;
        }
      }else {
        result += makePlainAnchor(child)?.outerHTML ?? "";
      }
    }else { 
      result += compensateBR(child) + this.extractTextAndAnchor(child, inclusion, nodeHandler);
    }
  } 
});

...
const ElementsOfBR = new Set([
  'block',
  'block flex',
  'block flow',
  'block flow-root',
  'block grid',
  'list-item',
]);
compensateBR: target => {
  if(target && 
    (target instanceof HTMLBRElement || ElementsOfBR.has(window.getComputedStyle(target).display))){
      return "<br />";
  }
  return "";
}

Kesimpulan

Artikel ini menerangkan beberapa teknik praktikal yang digunakan untuk melaksanakan editor mudah, seperti peristiwa biasa seperti onkeyup dan onpaste, cara menggunakan Selection dan Range untuk memulihkan kedudukan kursor dan cara mengendalikan nod elemen untuk mencapai editor kefungsian. Walaupun ungkapan biasa bukan fokus artikel ini, regex yang lengkap boleh meningkatkan keteguhan editor dalam mengenal pasti rentetan tertentu (regex yang digunakan dalam artikel ini akan kekal terbuka untuk pengubahsuaian). Anda boleh mengakses kod sumber melalui Github/AutolilnkEditor untuk mendapatkan butiran lanjut jika ia berguna untuk projek anda.

Atas ialah kandungan terperinci Membina Editor Pintar: Mengesan URL Secara Automatik dan Menukarkannya kepada Hiperpautan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!