在 Angular 模板驱动形式的文本区域内使用正则表达式答案

【问题标题】：Using Regex inside a textarea in Angular template driven form在 Angular 模板驱动形式的文本区域内使用正则表达式
【发布时间】：2020-01-06 03:59:09
【问题描述】：

我有一个清单

  list = [
    "Nrvana",
    "Red Hot Chilli Peppers",
    "R.E.M",
    "Reef"
  ]

在 html 上，我正在渲染这个列表的内容。

<div *ngFor= "let x of list" > {{x}}
</div>
<hr/>

<div>
  <textarea></textarea>
</div>

我还有一个 textArea ，用户可以在其中写任何他/她想要的东西。这是棘手的部分，我无法弄清楚。如果用户使用语法<<userText>>，则应弹出验证错误，说明Please use text from list inside <<>>。我可以做这部分，但我不知道是否需要制作正则表达式，如果是，请帮助我。请询问您是否需要更多信息。

p.s 这只是我为了了解我的问题而创建的，实际项目很长，我使用的是模板驱动的表单 这是https://stackblitz.com/edit/angular-t4cfqc

【问题讨论】：

this stackblitz 会回答您的问题吗？（虽然它确实使用基于反应的表单。选择模板驱动表单的任何具体原因？）
有人告诉我使用模板表单，因为我的经理是一群计划不周的人。他们告诉我们不需要任何验证。无论如何，stackbltz 解决方案适用于列表，但如果我尝试输入其他任何内容，它会出错。例如：“> is the best band”也会显示验证错误
你能提供有效和无效输入的例子吗？我的印象是只有文本 within > 是有效的。
当然。我正在为它编辑一个 stackblitz。
我什么也没看到。代码中有很多错误。您能在 cmets 中举一些例子吗？

标签： javascript html regex angular typescript

【解决方案1】：

取决于您想要如何完成此操作以及您到底想要做什么，但您可以做这样的事情

HTML

<textarea [(ngModel)]="textAreaText" [(ngModelChange)]="checkText()"></textarea>

.TS

textAreaText: string;

// ...

checkText() {
  const regex = /(?:^|\s)<<(.*?)>>(?:\s|$)/g;

  // If you only want to use certain keywords you could do something like this
  const regex = /(?:^|\s)<<((keyword1)|(keyword2)|(keyword3))>>(?:\s|$)/g;

  if (regex.test(this.textAreaText)) {
    // do something
  } else {
    // do something else
  }
}

【讨论】：

正则表达式末尾的“g”的目的是什么
意思是globalw3schools.com/jsref/jsref_regexp_g.asp
我有办法替换 .* 吗？与列表中的名称。我有一个包含 7 个项目的列表，只能在“>” 之间添加这些名称
@MenimE 请查看我的更新答案 - 如果这对您有帮助，请不要忘记将其标记为正确

【解决方案2】：

你也可以使用 pattern 属性。下面的例子

<textarea pattern="/(?:^|\s)<<(.*?)>>(?:\s|$)/g" [(ngModel)]="myTextArea" #myTextAreaModel="ngModel" required></textarea>

<div *ngIf="myTextAreaModel.errors.pattern">Your error msg here</div>

【讨论】：