Web应用埃及象形文字转换显示脚本问题求解

核心需求梳理 #

• 接收用户文本框输入，匹配特定编码规则（单编码如A1-A6，组合编码如A1A、A1B、A4C、A4E）
• 将匹配到的编码转换为对应埃及象形文字并展示

分步脚本实现方案 #

1. 编码与象形文字映射表 #

首先得建立一个编码-象形文字的映射对象，把所有支持的编码和对应的字符关联起来。示例如下：

const hieroglyphMap = {
  'A1': '𓀀',
  'A2': '𓀁',
  'A3': '𓀂',
  'A4': '𓀃',
  'A5': '𓀄',
  'A6': '𓀅',
  'A1A': '𓀆',
  'A1B': '𓀇',
  'A4C': '𓀈',
  'A4E': '𓀉'
  // 后续可以随时扩展更多编码映射
};

注：这里的象形文字Unicode字符需要根据你的实际需求替换为正确字符，同时要确保页面字体支持这类字符的显示

2. 输入处理与编码匹配逻辑 #

因为存在组合编码（比如A1A），必须优先匹配更长的编码，避免被错误拆分成单编码（比如A1+A）。可以先把编码按长度从长到短排序，再进行匹配：

function convertToHieroglyphs(inputText) {
  // 按编码长度降序排序，确保组合编码先被匹配
  const sortedCodes = Object.keys(hieroglyphMap).sort((a, b) => b.length - a.length);
  
  let result = inputText;
  // 遍历所有编码，全局替换匹配内容
  sortedCodes.forEach(code => {
    const regex = new RegExp(code, 'g');
    result = result.replace(regex, hieroglyphMap[code]);
  });
  
  return result;
}

3. 页面交互逻辑 #

把转换函数和页面元素绑定，支持按钮触发转换或者实时输入转换：

<!-- 补全你的HTML结构，添加输入框和结果展示区 -->
<textarea id="inputText" placeholder="输入编码（如A1、A1A）"></textarea>
<button id="convertBtn">转换为象形文字</button>
<div id="result"></div>

<script>
// 把上面的hieroglyphMap和convertToHieroglyphs函数放在这里

// 按钮点击转换
document.getElementById('convertBtn').addEventListener('click', function() {
  const input = document.getElementById('inputText').value.trim();
  const hieroglyphResult = convertToHieroglyphs(input);
  document.getElementById('result').textContent = hieroglyphResult;
});

// 可选：实时输入转换
document.getElementById('inputText').addEventListener('input', function() {
  const input = this.value.trim();
  const hieroglyphResult = convertToHieroglyphs(input);
  document.getElementById('result').textContent = hieroglyphResult;
});
</script>

4. 常见问题处理 #

• 编码匹配异常：如果用户输入了未定义的编码，可以添加默认处理逻辑，比如保留原编码或给出提示：

  // 修改replace逻辑，添加默认值
  result = result.replace(regex, match => hieroglyphMap[match] || `[未知编码: ${match}]`);
  

• 字体显示问题：确保页面引入支持埃及象形文字的字体，比如在CSS中设置：

  #result {
    font-family: "Noto Sans Egyptian Hieroglyphs", sans-serif;
    font-size: 2em;
  }
  

内容的提问来源于stack exchange，提问作者Boris J.