解析获取的主题标签并创建“svelte-routing”链接答案

【问题标题】：Parse fetched hashtags and create "svelte-routing" links解析获取的主题标签并创建“svelte-routing”链接
【发布时间】：2020-06-20 14:43:03
【问题描述】：

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

{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。原因是它需要较少的字符串清理，同时保留链接到主题标签的能力，如下所示：

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

【问题讨论】：

标签： svelte svelte-3 svelte-component

【解决方案1】：

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

【讨论】：

我认为使用更具体的正则表达式 /#([a-z0-9]+)/gi 可以缓解 XSS。谢谢回答。
@Mike XSS 可以在text 中的任何位置。
是的，我意识到了这一点。因此，必须要么清理显示的字符串，要么使用 pushkine 之类的字符串拆分方法

【解决方案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>

【讨论】：

我花了一点时间才弄清楚它是如何工作的。这是对我的问题的确切答案，我接受了其他简洁的 b/c，但感谢您发布它。
如果您可以添加对您的答案如何工作的解释，它将使其成为更好的答案。

【解决方案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>

【讨论】：