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

Question

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

{内容：">

文本文本 #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}

Answer 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攻击。

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

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>