Comment remplacer automatiquement les balises prédéfinies

Question

J'ai quelques caractères qui doivent être remplacés comme ci-dessus, mais je ne sais pas comment :

Caractères à remplacer :

première fin |
<jour>
<rouge> |
<a ###>
<p><code>day => Obtenir la date actuelle (par exemple : 14)</code></p><p>
<code>rouge => couleur rouge</code>
<code><a ###https://www.google.com/>Link</> ;/></code></p>
<p><code>Entrez : Bonjour<red>M. Siro</red></code>
<code>Sortie : Bonjour<span style="color: red">M. Siro</span></code></p>
<p>Mon historique de discussion. </p>
<p>Pouvez-vous me dire comment écrire une fonction générique pour vérifier le remplacement de la balise ci-dessus ?
Voici mon code : </p>
<p>

<pre class="snippet-code-js lang-js Prettyprint-override"><code>export const formatTags = (content) =>
  const firstTag = "<rouge>";
  const secondTag = "</rouge>";

  const tagsIndex = [...content.matchAll(new RegExp(firstTag, "gi"))].map(
    (a) =>
  );

  const initialContent = contenu ;

  tagsIndex.forEach((index) => {
    const tagContent = initialContent.substring(
      index + firstTag.length,
      initialContent.indexOf(secondTag, index)
    );

    if (firstTag === "<rouge>") {
      content = content.replaceAll(
        `${firstTag}${tagContent}${secondTag}`,
        `<span style="couleur : rouge">${tagContent || "わからない"}</span>`
      );
    }
  });

  renvoyer du contenu ;
};</code>

<code><span
   :class="(msg.image || msg.file) && msg.text ? 'mt-2' : ''"
   v-html="msg.text"
   v-linkifié:options="{
    nom de classe : currentUserId === msg.senderId
     ? 'message-lien-externe'
     :',
   }"
/></code>

Désolé, mon anglais n'est pas très bon !

Merci à tous!

Answer 1

Le rappel de la fonction de remplacement utilisé dans Map。用于捕获文本的正则表达式将是键，replace vous pouvez créer une règle de remplacement sera la valeur. Parcourez les règles et mettez à jour la chaîne.

const input = `Today is <day>th day of the month. 
I'd like <red> this text to be in red</red> 
and <blue>this to be in blue</blue>. 
Testing the links <a ###https://www.google.com/>with Google</>
and <a ###https://stackoverflow.com/>Stak Overflow</>`

function convert(str) {
  const replacerRules = new Map([
    [/<day>/g, new Date().getDate()],
    [/<([^>]+)>([^<]+)<\/>/g, (_, p1, p2) => `<span style="color: ${p1}">${p2}</span>`],
    [/<a #+([^>]+)>([^<]+)<\/>/g, (_, p1,p2) => `<a href="${p1}">${p2}</a>`]
  ])
  
  for (const [key, replacer] of replacerRules)
    str = str.replace(key, replacer)
  
  return str
}

console.log( convert(input) )
document.querySelector("div").innerHTML = convert(input)

<div />