天气预报字符串美化：如何将年、月、日、时、分、秒、温度等信息添加 CSS 样式？

根据特定条件美化字符串

问题：

后端返回一个天气预报字符串，如何根据其中的年、月、日、时、分、秒、数字和“今天”等字符，添加特定的 CSS 样式，使其变得醒目？

解决方案：

使用 replace 函数结合正则表达式对字符串进行替换，从而为符合特定条件的字符添加样式。

立即学习“前端免费学习笔记（深入）”；

代码示例：

const weatherForecast = "2022年5月5日10点30分，今天北京天气清朗，温度15-25°C。";

const styledForecast = weatherForecast.replace(
  /.*日|今天|\d{1,}-\d{1,}/g,
  (str) =&gt; `<span style="color:#f00;">${str}</span>`
);

登录后复制

说明：

• replace 函数的第二个参数是一个回调函数，它接收匹配的字符串。
• 回调函数返回带样式的字符串，其中匹配的内容用 和 包裹。

正则表达式 /.*日|今天|\d{1,}-\d{1,}/g 匹配符合条件的字符，其中：

• .*日 匹配日。
• 今天 匹配字符串“今天”。
• \d{1,}-\d{1,} 匹配数字（可以含有多个连字符）。

以上就是天气预报字符串美化：如何将年、月、日、时、分、秒、温度等信息添加 CSS 样式？的详细内容，更多请关注抖狐科技其它相关文章！