Svelte中移除包裹div后，如何保留文本与元素间的空格？

我需要高亮字符串中的指定单词，通过将单词包裹在带特殊类的span元素中实现，编写的代码如下：

const splittedLine = text.split(wordToHighlight);

// some other code    

<div class="wrapper">
  {splittedLine[0]}
    
  <span class="highlighted">
    {wordToHighlight}
  </span>
    
  {splittedLine[1]}
</div>

带包裹div时效果符合预期，例如高亮“player”会得到：

a new player has connected

但我需要移除该包裹div（避免组件被双重包裹），移除后文本节点与span元素间的空格丢失，即使splittedLine中的字符串带有首尾空格也会被忽略，结果变为：

a newplayerhas connected

尝试使用display:contents属性或显式添加{" "}空格均无效。请问如何在移除包裹div后保留span元素周围的空格？为何div会影响空格的保留？（使用Svelte框架）

解决方法 #

1. 用{@html}渲染拼接后的HTML片段 #

把拆分后的文本和高亮span拼接成完整的HTML字符串，通过{@html}指令渲染，能完整保留空格：

{@html `${splittedLine[0]}<span class="highlighted">${wordToHighlight}</span>${splittedLine[1]}`}

⚠️ 注意：如果text或wordToHighlight包含用户输入内容，必须先做XSS过滤，防止安全风险。

2. 用inline span替代div做“透明容器” #

如果只是不想用div，换成inline类型的span容器，加上display: contents让它不产生布局盒，既避免双重包裹，又能保留内部空格解析规则：

<span style="display: contents;">
  {splittedLine[0]}
  <span class="highlighted">{wordToHighlight}</span>
  {splittedLine[1]}
</span>

3. 插入非换行空格  #

显式使用非换行空格代替普通空格，Svelte不会压缩这类空格：

{splittedLine[0]} 
<span class="highlighted">{wordToHighlight}</span>&nbsp;
{splittedLine[1]}

⚠️ 注意：非换行空格不会自动换行，适合确定不需要换行的场景。

为什么div会影响空格保留？ #

这是Svelte的模板空格解析规则导致的：

• 当内容在块级元素（比如div）内部时，Svelte会遵循HTML规范处理空格——多个空格合并为一个，但不会完全移除文本节点和元素之间的间隔。
• 当直接在父元素（比如p标签）下混合文本节点和span元素时，Svelte的模板编译器会优化掉模板中的换行和多余空格，把相邻的文本和元素“挤”在一起，导致原本的间隔消失。
• 简单来说：块级容器内部的空格会被正常解析，而零散的文本+元素直接放在父元素下时，Svelte会自动压缩多余空格，只保留文本内容本身自带的空格（如果拆分后的splittedLine本身没带空格，就会出现无间隔的情况）。

内容的提问来源于stack exchange，提问作者b3rry