如何基于CSS list-style-type和索引获取对应的序号字符

方案1：前端浏览器环境（100%和CSS渲染结果一致） #

直接利用浏览器原生的列表渲染逻辑，完全对齐CSS的list-style-type规则，不需要自行维护映射表，代码如下：

function getListMarker(type, zeroBasedIndex) {
  // 0基索引转成实际序号
  const ordinal = zeroBasedIndex + 1;
  const ol = document.createElement('ol');
  ol.style.listStyleType = type;
  ol.style.position = 'absolute';
  ol.style.visibility = 'hidden';
  // 生成对应数量的li
  ol.innerHTML = '<li>'.repeat(ordinal);
  document.body.appendChild(ol);
  // 获取对应li的marker内容
  const marker = getComputedStyle(ol.children[zeroBasedIndex], '::marker').content;
  // 清理DOM，返回去掉引号的结果
  document.body.removeChild(ol);
  return marker.replace(/^"|"$/g, '');
}

调用示例：

• 调用getListMarker('lower-greek', 2) → 返回γ（匹配示例1要求）
• 调用getListMarker('cjk-ideographic', 8) → 返回九（匹配示例2要求）
• 调用getListMarker('lower-roman', 0) → 返回i、getListMarker('lower-roman', 2) → 返回iii（匹配示例3要求）

方案2：Node.js/无DOM环境（使用Intl.NumberFormat） #

大部分标准list-style-type都可以通过ECMAScript内置的国际化API实现，无需引入第三方依赖：

const numberFormatMap = {
  'lower-roman': { style: 'decimal', numberingSystem: 'romn' },
  'upper-roman': { style: 'decimal', numberingSystem: 'roman' },
  'lower-greek': { style: 'decimal', numberingSystem: 'grek' },
  'cjk-ideographic': { style: 'decimal', numberingSystem: 'hanidec' },
  'decimal-leading-zero': { style: 'decimal', minimumIntegerDigits: 2 },
  'lower-latin': { style: 'decimal', numberingSystem: 'latn' },
  'upper-latin': { style: 'decimal', numberingSystem: 'latn' }
  // 可按需扩展其他type的映射
};

function getListMarker(type, zeroBasedIndex) {
  const ordinal = zeroBasedIndex + 1;
  const config = numberFormatMap[type];
  if (!config) throw new Error(`不支持的list-style-type: ${type}`);
  let result = new Intl.NumberFormat('zh-CN', config).format(ordinal);
  // 大小写特殊处理
  if (type === 'lower-latin') result = result.toLowerCase();
  if (type === 'upper-latin') result = result.toUpperCase();
  return result;
}

调用逻辑和返回结果和方案1完全一致。

注意事项 #

• 如果需要支持非常用的list-style-type，可以自行扩展numberFormatMap的映射规则，极小众类型也可以通过手动维护枚举映射表实现。
• 两个方案都默认处理了0基索引转1基序号的逻辑，直接传入你拿到的0开始的索引即可使用。

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