你只需要对拿到的resolution字符串做个简单的正则替换处理，就能实现想要的显示效果。这里有两种直观的实现方式：

方式一：直接在JSX中处理 #

直接在渲染逻辑里用正则拆分开头的字母标识和后面的分辨率数值，拼接成目标格式：

isMobile ? dpi_url && dpi_url.mobile.map((value, index) => (
  <Link 
    download 
    onClick={this.downloadModal} 
    href={value.url} 
    key={index} // 把key放在最外层的Link上更符合React规范
  >
    <div className="url_name">
      {value.resolution.replace(/^([A-Za-z]+)(\d+p)$/, '$1: $2')}
    </div>
  </Link>
)) : null

这个正则的作用很明确：

• ^([A-Za-z]+) 匹配分辨率开头的所有字母（比如S、M、HD）
• (\d+p) 匹配后面的数字加p的部分（比如240p、720p）
• 替换成$1: $2，就是把两部分用:加空格连接起来，完美转换成你要的格式。

方式二：抽成单独的工具函数（推荐） #

如果以后需要复用这个格式化逻辑，或者想让代码结构更清晰，可以把处理逻辑抽成组件内的方法：

// 在组件类中添加格式化方法
formatResolution = (resolution) => {
  return resolution.replace(/^([A-Za-z]+)(\d+p)$/, '$1: $2');
}

// 渲染时调用这个方法
isMobile ? dpi_url && dpi_url.mobile.map((value, index) => (
  <Link 
    download 
    onClick={this.downloadModal} 
    href={value.url} 
    key={index}
  >
    <div className="url_name">
      {this.formatResolution(value.resolution)}
    </div>
  </Link>
)) : null

这样不管是现在维护还是以后调整格式，都只需要修改formatResolution这一个地方就行，扩展性更好。

两种方式都能完美处理你给出的三种分辨率格式：

• S240p → S: 240p
• M360p → M: 360p
• HD720p → HD: 720p

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