0

我正在从服务器获取可以包含主题标签的动态内容：

{内容："文字文字#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'元素？（或工作<Link to={cup}/>）

编辑： 我将最佳答案更改为@pushkine。原因是它需要较少的字符串清理，同时在使用时保留链接到主题标签的能力，如下所示：

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

3 回答 3

3

您可以使用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 攻击。

于 2020-06-21T17:02:06.560 回答
2 
<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>
于 2020-06-21T16:48:54.940 回答
2

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>
于 2020-06-21T17:04:37.443 回答