正则表达式传入动态值失效？如何实现动态单词数校验

你之前的写法错误在于对正则字面量和RegExp构造函数的使用逻辑理解有误：

• 把正则字面量塞进模板字符串会得到带斜杠的字符串（比如"/^\\s*...$/"），match方法用这个字符串时会把斜杠当成普通字符匹配，自然无法生效。
• 正则字面量语法里不能直接插入变量，必须用RegExp构造函数来动态生成正则规则。

正确的实现方式：

1. 使用RegExp构造函数，把正则主体写成模板字符串，动态替换max-1的值。
2. 注意字符串中的转义处理：原正则里的\s和\S在字符串中需要写成\\s和\\S——因为字符串的反斜杠是转义符，必须转义一次才能被正则引擎正确识别。
3. 推荐用test方法替代match，因为我们只需要判断是否匹配，test的性能更优。

修正后的完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <h3>Hardcoded Max Limit (Working)</h3>
        <v-text-field
          v-model="queryH"
          :rules="[rules.maxWordsH()]"
          dense
        ></v-text-field>
        <h3 class="red--text">Dynamic Max Limit (Now Working)</h3>
        <v-text-field
          v-model="queryD"
          :rules="[rules.maxWordsD(3)]"
          dense
        ></v-text-field>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {
          return {
            queryH: null,
            queryD: null,
            rules: {
              maxWordsH() {
                return (v) =>
                  (v || "").match(/^\s*(?:\S+(?:\s+\S+){0,2}\s*)?$/) ?
                  true :
                  "Max " + 3 + " words are allowed";
              },
              maxWordsD(max) {
                return (v) => {
                  // 动态生成正则，注意转义斜杠
                  const wordRegex = new RegExp(`^\\s*(?:\\S+(?:\\s+\\S+){0,${max-1}}\\s*)?$`);
                  return wordRegex.test(v || "") ? true : `Max ${max} words are allowed`;
                };
              },
            },
          };
        },
      })
    </script>
  </body>
</html>

关键修改说明：

• 在maxWordsD方法中，用new RegExp()结合模板字符串生成动态正则，将硬编码的2替换为${max-1}。
• 将match改为test，更适合做布尔值判断场景。
• 修正了正则字符串中的转义字符，确保\s和\S能被正则引擎正确识别。

现在测试第二个输入框：输入超过3个单词会正常提示错误，输入符合要求的内容则校验通过。

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