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

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

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

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

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

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

svelte svelte-3 svelte-component
person Mike    schedule 20.06.2020    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

person Patrick    schedule 21.06.2020
comment
Я думаю, что использование более конкретного регулярного выражения /#([a-z0-9]+)/gi уменьшит опасность XSS. Спасибо за ответ. - person Mike; 21.06.2020
comment
@Mike XSS может быть где угодно в text. - person Patrick; 21.06.2020
comment
да, я понял это. Таким образом, нужно будет либо дезинфицировать отображаемую строку, либо перейти к методу разделения строк, например pushkine - person Mike; 26.06.2020

arrow_upward
2
arrow_downward

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>
person Jérémie B    schedule 21.06.2020

arrow_upward

arrow_downward

person    schedule
comment
Мне потребовалось время, чтобы понять, как это работает. Это точный ответ на мой вопрос, я согласился с другими частями его краткости, но спасибо, что разместили его. - person Mike; 21.06.2020
comment
Если бы вы могли добавить объяснение того, как работает ваш ответ, это сделало бы его более качественным. - person Dijkgraaf; 21.06.2020