我认为这个问题可能是由于你在字符类中声明的字符造成的。根据 JavaScript 中对正则表达式风格的一些更改，可能会启用u或v标志（它似乎是硬编码或自动触发的，无法手动设置），这可能会导致字符类出现问题。例如，[a-z|]有|，现在应该在字符类中用\|进行转义。你在你的模式中使用了一些。
我不会使用\w，而是用\p{L}代替它，它用于匹配任何语言中的任何字母。这将匹配“é”或““，而不仅仅是没有重音的英文字母。
匹配所有正确的情况是相当复杂的，但这是我可以建议的：

^(?:\p{L}['´ \-]?)+(?<=[^\s\-'´])$

这个想法是接受一个以字母开头的输入，然后后跟一个可选的空格，连字符或'或´，一次或多次。为了避免以空格或其中一个字符结束，您可以在模式结束之前添加一个正向后看。
这将避免接受类似Jack-或Ooooh'的内容。
另一个优点是你不能接受Jean--Jaques或O''Neil。

form {
  margin: 1em;
  padding: 0;
  display: flex;
  column-gap: 1em;
}

input {
  padding: 0.25em .5em;
  border: 1px solid gray;
}

input[type="text"] {
  box-shadow: 1px 1px 4px inset rgba(0, 0, 0, 0.1);
}
input[type="text"]:focus {
  outline: 1px solid gray;
}

input[pattern]:focus:valid {
  border-color: green;
}

input[pattern]:focus:invalid {
  border-color: red;
}

input[type="submit"] {
  background-color: silver;
}

:focus-visible {
  outline: none;
}

<form action="#">
  <div class="form-element">
    <input
      name="firstName"
      pattern="^(?:\p{L}['´ \-]?)+(?<=[^\s\-'´])$"
      title="Your first name must be valid"
      type="text"
      placeholder="First Name"
      required
    />
  </div>
  <div class="form-element form-submit">
    <input type="submit" value="Submit" />
  </div>
</form>

你也可以用例子和这里的解释来测试正则表达式：https://regex101.com/r/tmEsgX/2