0
votes

Analyser les hashtags récupérés et créer des liens "svelte-routing"

Je récupère du contenu dynamique sur le serveur qui peut inclure un hashtag:

{content: "text text #Cup"}

Doing:

 {first}
    {#each arr as { href, str }}
        <a href={href.toLowerCase()} use:link>{href}</a>
        {str}
    {/each}

La deuxième manière le rendra tel quel (sans être connecté à des actions ou événements de routage svelte).

Comment devenir un élément "use: link" "svelte-routing"? (ou travaillant )

MODIFIER: J'ai changé la meilleure réponse en @pushkine. La raison en est qu'il nécessite moins de nettoyage des chaînes tout en préservant la possibilité de créer des liens vers des hashtags lors de l'utilisation de ce type:

<script>
  import { link } from "svelte-routing"
    
    function hash(text) {
      return text.replace(/\#Cup/, '<a href="cup" use:link>Cup</a>')
  }
</script>

<p>
    {hash("this is a #Cup")}
</p>
<p>
    {@html hash("this is a #Cup")}
</p>

svelte svelte-component svelte-3

0 commentaires

3 Réponses :

2
votes

<script>
    import { link } from 'svelte-routing';
    let str = 'this is a #Cup';
    const [first, ...arr] = str.split(/\#/g).map((v, i) => {
        if (i === 0) return v;
        else {
            const index = v.indexOf(' ');
            return { href: index !== -1 ? v.slice(0, index + 1) : v, str: index !== -1 ? v.slice(index) : '' };
        }
    });
</script>

<p>
    {@html first}
    {#each arr as { href, str }}
        <a href={href.toLowerCase()} use:link>{href}</a>
        {@html str}
    {/each}
</p>

2 commentaires

Il m'a fallu un moment pour comprendre comment cela fonctionne. Ceci est la réponse exacte à ma question, j'ai accepté d'autres b / c de sa brièveté mais merci de l'afficher.

Si vous pouviez ajouter une explication sur le fonctionnement de votre réponse, cela en ferait une réponse de meilleure qualité.

3
votes

Vous pouvez utiliser l'action links au lieu de l'action link .

<script>
  import { links } from "svelte-routing"

  const hashtags = text => text.replace(/(#([\w]+))/g, '<a href="/tags/$2">$1</a>');
</script>

<p use:links>
    {@html hashtags("this is #just a #Cup")}
</p>

Gardez à l'esprit que cette chaîne n'est pas échappée . Donc, insérer des balises html et exécuter des attaques XSS est possible avec cette solution.

3 commentaires

Je pense que l'utilisation d'une expression régulière plus spécifique / # ([a-z0-9] +) / gi atténuerait XSS. Merci de réponse.

@Mike Le XSS peut être n'importe où dans le texte .

oui je m'en suis rendu compte. Il faudrait donc soit nettoyer la chaîne affichée, soit utiliser une méthode de fractionnement de chaîne comme pushkine

2
votes

svelte-routing a une action use: links que vous pouvez ajouter au conteneur parent:

<script>
  import { links } from "svelte-routing"
        
  function hash(text) {
      return text.replace(/\#Cup/, '<a href="cup">Cup</a>')
  }
</script>
    
<p use:links>
    {@html hash("this is a #Cup")}
</p>

0 commentaires