Svelte输入时#话题标签着色问题：输出HTML标签未渲染

你的问题核心在于：<input>/<textarea> 只能显示纯文本，无法渲染HTML标签，所以直接把带<span>的字符串赋值给绑定值，只会被当成普通文本显示。下面是快速解决的两种方案：

方案一：输入层+预览层（推荐，无光标问题） #

通过分离输入和显示，用textarea负责输入，上方叠加透明预览层渲染彩色标签，既保留输入体验又能实时看到着色效果：

<script>
let tweet = "";

// 响应式生成带着色标签的HTML内容
$: formattedTweet = tweet.replace(/\B(#[^\W_][\w-]*)/gi, '<span class="hash_tag">$&</span>');
</script>

<style>
.tweet-wrap {
    position: relative;
}
.tweet-input, .tweet-preview {
    box-sizing: border-box;
    padding: 2.5px;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #4b5563;
    background-color: #1f2937;
    color: white;
    font: inherit;
    min-height: 100px;
    resize: vertical;
}
/* 预览层设为透明、不可点击，让输入层接收交互 */
.tweet-preview {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    background: transparent;
}
.tweet-input {
    caret-color: white;
    outline: none;
}
.tweet-input:focus {
    border-color: #3b82f6;
}
/* 话题标签颜色 */
.hash_tag {
    color: #1d9bf0;
}
</style>

<div class="tweet-wrap">
    <textarea 
        class="tweet-input"
        bind:value={tweet}
        placeholder="What's happening..."
        maxlength="200"
    ></textarea>
    <div class="tweet-preview" {@html formattedTweet}></div>
</div>

方案二：使用contenteditable元素（需处理光标） #

如果希望直接在可编辑区域内渲染HTML，可以用contenteditable="true"的div，但需要额外处理光标位置丢失的问题：

<script>
let rawContent = "";
let editableEl;

function handleInput() {
    // 保存光标位置
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(editableEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    const start = preSelectionRange.toString().length;

    // 替换话题标签为彩色span
    rawContent = editableEl.textContent;
    const formatted = rawContent.replace(/\B(#[^\W_][\w-]*)/gi, '<span class="hash_tag">$&</span>');
    editableEl.innerHTML = formatted;

    // 恢复光标位置
    const postSelectionRange = document.createRange();
    postSelectionRange.setStart(editableEl.firstChild, start);
    postSelectionRange.setEnd(editableEl.firstChild, start);
    selection.removeAllRanges();
    selection.addRange(postSelectionRange);
}
</script>

<style>
.editable {
    box-sizing: border-box;
    padding: 2.5px;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #4b5563;
    background-color: #1f2937;
    color: white;
    min-height: 100px;
    outline: none;
}
.editable:focus {
    border-color: #3b82f6;
}
.hash_tag {
    color: #1d9bf0;
}
</style>

<div 
    class="editable"
    contenteditable="true"
    on:input={handleInput}
    bind:this={editableEl}
    placeholder="What's happening..."
></div>

关键说明 #

• 方案一无需处理光标逻辑，实现简单，适合大多数场景；
• 方案二更贴近原生输入框的视觉融合，但需要额外处理光标位置，避免替换HTML后光标跳到末尾；
• 两种方案都利用Svelte的响应式特性，实时处理话题标签的着色逻辑。

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