javascript - 像在 twitter 上一样用 svelte 打字时给 #hashtags 上色

Question

我正在起诉 svelte，这里的 react 性是关键，我想在文本中输入 #hashtags 时进行着色， 代码:

<script> 
let tweet = "";
        function blueColor() {
    tweet = tweet.replace(/<a\b[^>]*>|\B(#[^\W_][\w-]*)/gi, function (m, p) {
        return p ? '<span class="hash_tag">' + m + '</span>' : m;
    });
}
</script>
                               <input
                                    id="message"
                                    rows="4"
                                    bind:value={ tweet }
                                    on:input={ blueColor }
                                    class="block p-2.5 w-full 
                                    rounded-lg border text-white focus:outline-none focus:ring
                                    bg-gray-700 border-gray-600 placeholder-gray-400
                                    hover:border-blue-600"
                                    placeholder="What's happening..."
                                    maxlength="200"
                                />

如您所见，我可以在打字时替换它，但我将其作为输出:

as <span class="hash_tag">#hashtag</span>

你有什么快速的解决办法吗？

Answer 1

Do you have any quick solution

对此没有快速的解决方案。获取样式文本输入的唯一方法是使用 contenteditable就交互逻辑而言，它往往非常复杂。

您最好的选择是寻找一个已经可以处理所有必需品的库(处理复制/粘贴、删除不需要的输入和格式设置等)。

如果您想自己实现逻辑，可以使用 contenteditable="plaintext-only" 立即限制输入。不过，正确同步状态、删除/添加标签所需的元素而不干扰用户输入可能仍然很复杂。