Streamlit同时激活两个函数致HTML表格渲染报错求助

问题重现 #

单独激活short_name或add_flag函数时，HTML表格显示正常；但同时启用两个函数时，浏览器抛出错误：

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('td�') is not a valid name.

原因解析 #

这个错误的核心是国旗emoji的编码在HTML解析时破坏了标签结构。当两个函数同时执行时，add_flag会把国旗emoji追加到short_name处理后的球员名末尾，而后续生成HTML表格的过程中，emoji的多字节编码被错误截断或解析，导致<td>标签的字符序列被打乱，出现乱码�，浏览器无法识别这个损坏的标签名，最终抛出错误。

解决方案 #

方案1：对emoji进行HTML实体编码 #

把原始emoji转换成HTML实体，避免直接插入多字节字符干扰HTML解析：

import html

def add_flag(player):
    country = str(player['Country']).strip()
    country_plus_flag = flag.get(country, " ")
    # 转义emoji为HTML实体
    encoded_flag = html.escape(country_plus_flag)
    return f"{player['Player']} {encoded_flag}"

方案2：强制HTML使用UTF-8编码 #

如果是用pandas生成HTML表格，确保输出编码为UTF-8，同时在HTML头部声明编码：

import pandas as pd

# 生成表格时指定UTF-8编码
html_table = players.to_html(encoding='utf-8')
# 拼接完整HTML，添加编码声明
full_html = '<meta charset="UTF-8">' + html_table

方案3：检查国旗emoji的有效性 #

确认flag字典中的emoji是标准Unicode国旗符号，没有混入不可见控制字符或损坏的字节。可以用Unicode编码值核对，比如🇨🇳的Unicode是U+1F1E8 U+1F1F3。

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