解析获取的主题标签并创建 "svelte-routing" 链接

Question

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

{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' 元素？（或工作<Link to={cup}/>）

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

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

Answer 1

<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>

Answer 2

您可以使用 links 操作而不是 link 操作。

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

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

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

请记住，此字符串未转义。因此，使用此解决方案可以插入 html 标记并执行 XSS 攻击。

Answer 3

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>

解析获取的主题标签并创建 "svelte-routing" 链接

Parse fetched hashtags and create "svelte-routing" links

svelte

svelte-component

svelte-3