在React.js正则函数中使用字符串插值遇问题求助

我来帮你梳理下代码里的几个关键问题，这些就是导致循环内逻辑失效的核心原因：

1. 循环边界设置错误 #

你的循环条件写的是x <= weatherTypes.length，但数组的索引是从0开始的——当x等于weatherTypes.length时，weatherTypes[x]会返回undefined，这会直接导致后续的正则匹配逻辑出错。正确的循环条件应该是x < weatherTypes.length。

2. 正则表达式创建方式不对 #

用字符串模板/${p}/i生成的是普通字符串，不是真正的正则表达式对象。match方法如果传入字符串，只会做简单的字符串匹配，根本不会识别/i这种正则标志（它会被当成字符串的一部分）。想要创建带忽略大小写规则的正则，应该用new RegExp(p, 'i')来生成正则对象。

3. 类名添加逻辑写错了 #

你在添加类名时固定用了weatherTypes[0]，这意味着不管匹配到哪种天气，都会给元素加上splash--weather-rain的类，完全没用到当前循环的天气类型变量p，应该改成splash--weather-${p}。

4. 没必要的重复DOM查询 #

每次循环都调用document.getElementById("splashContact")查询DOM元素，这是冗余操作，把这行代码移到循环外面，只查询一次就够了。

修正后的代码 #

const weatherTypes = ['rain', 'clouds', 'snow', 'clear', 'thunderstorm'];
// 提前获取DOM元素，避免重复查询
const splashElement = document.getElementById("splashContact");

for (let x = 0; x < weatherTypes.length; x++) { 
  const p = weatherTypes[x]; 
  console.log(p);
  // 正确创建带忽略大小写标志的正则对象
  const searchPattern = new RegExp(p, 'i'); 
  const result = this.state.description.match(searchPattern); 
  console.log(`splash--weather-${p}`);
  
  if (result !== null) { 
    splashElement.classList.add(`splash--weather-${p}`);
    // 如果只需要匹配第一个符合的天气类型，可加break终止循环
    // break;
  } 
}

更简洁的写法（推荐） #

如果你的需求是只要匹配到第一个符合的天气类型就停止，可以用数组的find方法简化代码，更符合React的风格：

const weatherTypes = ['rain', 'clouds', 'snow', 'clear', 'thunderstorm'];
const splashElement = document.getElementById("splashContact");

const matchedType = weatherTypes.find(type => {
  const regex = new RegExp(type, 'i');
  return regex.test(this.state.description);
});

if (matchedType) {
  splashElement.classList.add(`splash--weather-${matchedType}`);
}

内容的提问来源于stack exchange，提问作者party-ring