Парсить полученные хэштеги и создавать ссылки "стройной маршрутизации" - PullRequest
Новая
       168

Парсить полученные хэштеги и создавать ссылки "стройной маршрутизации"

0 голосов
/ 20 июня 2020

Я получаю динамический c контент с сервера, который может включать хэштег:

{content: "text text #Cup"}

Выполнение: 

<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-routing).

Как мне превратиться в «svelte-routing»? Использование: ссылка элемент? (или рабочий <Link to={cup}/>)

РЕДАКТИРОВАТЬ: Я изменил лучший ответ на @pushkine. Причина в том, что он требует меньшего количества очистки строк при сохранении возможности ссылки на хэштеги при таком использовании: 

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

Ответы [ 3 ]

3 голосов
/ 21 июня 2020

Вы можете использовать действие links вместо действия 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>

Имейте в виду, что эта строка не экранируется. Таким образом, с помощью этого решения можно вставлять теги html и выполнять XSS-атаки.

2 голосов
/ 21 июня 2020

svelte-routing имеет действие use:links, которое вы можете добавить в родительский контейнер: 

<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>
2 голосов
/ 21 июня 2020 
<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>
...