用输入字段Javascript/Angular2替换某些单词

我有一根a弦“我喜欢橙色、蓝色、黑色、粉色、玫瑰色、黄色、白色、黑色”。 是否可以用输入字段替换黄色和黑色，这样我就可以输入自己的颜色

const a: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
const b: string =['black', 'yellow'];

所以我想要这样的东西

是否可以使用javascript或angular2实现这一点

请帮帮我

这是完整的代码

第2部分.组件.ts

import { Component, OnInit } from '@angular/core';

import { DataService } from '../sample02-simpleService/data.service';

@Component({
  moduleId: module.id,
  selector: 'part2',
  template: `
    <p>{{text}}</p>
    <p>{{itemsSource}}</p>
  `,
  providers: [DataService]

})
export class Part2Component implements OnInit {
  text = 'Hallo';
  public itemsSource: string;
  public itemsSource2: string[];
  public abc: string[];
  constructor(public dataService: DataService) {
  }

  ngOnInit() {
    this.abc = this.dataService.getData3();
    this.itemsSource = this.dataService.getData2();
    this.itemsSource = this.itemsSource.replace(new RegExp(this.abc.join('|'), 'g'),  function myFunction(){return document.write('<input>'); });

  }
}

---

以下是来自组件部分的代码：

a: String = 'I like orange, blue, black, pink, rose, yellow, white, black';
b: String[] = ['black', 'yellow'];

constructor() { }

ngOnInit() {
    this.b.forEach(str => {
        let regExp = new RegExp(str.toString(),'g');
        this.a = this.a.replace(regExp, '<input/>');
    });
 }

a:String='我喜欢橙色、蓝色、黑色、粉色、玫瑰色、黄色、白色、黑色'；
b:字符串[]=['黑色'，'黄色'；
构造函数（）{}
恩戈尼尼特（）{
this.b.forEach（str=>{
设regExp=newregexp（str.toString（），'g'）；
this.a=this.a.replace（regExp.）；
});
}

上面的函数将设置您想要实现的确切html字符串

下一步是：

---

Angular 2不支持直接注入输入字段，因此您必须遵循此链接。

以下是来自组件的代码：

a: String = 'I like orange, blue, black, pink, rose, yellow, white, black';
b: String[] = ['black', 'yellow'];

constructor() { }

ngOnInit() {
    this.b.forEach(str => {
        let regExp = new RegExp(str.toString(),'g');
        this.a = this.a.replace(regExp, '<input/>');
    });
 }

a:String='我喜欢橙色、蓝色、黑色、粉色、玫瑰色、黄色、白色、黑色'；
b:字符串[]=['黑色'，'黄色'；
构造函数（）{}
恩戈尼尼特（）{
this.b.forEach（str=>{
设regExp=newregexp（str.toString（），'g'）；
this.a=this.a.replace（regExp.）；
});
}

上面的函数将设置您想要实现的确切html字符串

下一步是：

Angular 2不支持直接注入输入字段，因此您必须遵循此链接。

更新：

在理解了您的需求之后，我改变了实现技术并相应地更新了答案。我没有使用（推荐用于显示目的），而是创建了如下简单组件

import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'fill-in-blank',
  template: `
  <ng-container *ngFor="let text of texts; let i = index">
    {{text}}<input *ngIf="i!==texts.length-1" type="text" [(ngModel)]="value[i]" (ngModelChange)="onValueChange()">
  </ng-container>
  `
})
export class FillInBlankComponent implements OnInit {

  @Input() textline: string;

  @Input() fields: string[];

  @Output() valueChanged = new EventEmitter();

  texts: string[];

  value: string[] = [];

  constructor() {}

  ngOnInit() {

    let regex = null;
    if (this.fields && this.fields.length > 0) {
      regex = new RegExp(this.fields.join("|"), 'gi');
    }
    this.texts = this.textline.split(regex);
  }

  onValueChange(index) { // Updated According to requirement
    this.valueChanged.emit({ index: index, value: this.value[index] });
  }
}

确保您已在模块声明部分添加了

FillInBlankComponent

。

更新：

在理解了您的需求之后，我改变了实现技术并相应地更新了答案。我没有使用（推荐用于显示目的），而是创建了如下简单组件

import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'fill-in-blank',
  template: `
  <ng-container *ngFor="let text of texts; let i = index">
    {{text}}<input *ngIf="i!==texts.length-1" type="text" [(ngModel)]="value[i]" (ngModelChange)="onValueChange()">
  </ng-container>
  `
})
export class FillInBlankComponent implements OnInit {

  @Input() textline: string;

  @Input() fields: string[];

  @Output() valueChanged = new EventEmitter();

  texts: string[];

  value: string[] = [];

  constructor() {}

  ngOnInit() {

    let regex = null;
    if (this.fields && this.fields.length > 0) {
      regex = new RegExp(this.fields.join("|"), 'gi');
    }
    this.texts = this.textline.split(regex);
  }

  onValueChange(index) { // Updated According to requirement
    this.valueChanged.emit({ index: index, value: this.value[index] });
  }
}

---

---

确保您已在模块声明部分添加了

FillInBlankComponent

。

我猜它一定类似于a=a.replace（newregexp（b.join（“|”），“g”），function myFunction（）{return document.write（“”）；}）；您刚才在评论中发布的答案有什么问题？@Arrow，它不起作用，它说“type void不可分配给type string”您能在代码中发布您是如何实现该函数的吗？它将提供更多的上下文并帮助解决您的问题。它还可以防止这个问题被标记为重复的问题。@Arrow当然，我编辑了我的问题，所以完整的代码现在就在那里了。我想它一定是类似于a=a.replace（new RegExp（b.join（'|'），'g'），function myFunction（）{return document.write（''）；您刚才在评论中发布的答案有什么问题？@Arrow，它不起作用，它说“type void不可分配给type string”您能在代码中发布您是如何实现该函数的吗？它将提供更多的上下文并帮助解决您的问题。它还可以防止这个问题被标记为重复问题。@箭头：当然，我编辑了我的问题，所以完整的代码现在就在那里。我已经仔细阅读了链接上的解决方案（我的意思是如何在HMTL中注入输入），但不能应用于我的案例-它不起作用，我真的不知道如何使它起作用……你能给我一个提示吗，我应该在link提供的示例中做些什么更改才能使其生效？请设置plunker好吗？我已经仔细阅读了链接上的解决方案（我的意思是如何在HMTL中注入输入），但无法应用于我的案例-它不起作用，我真的不知道如何使其生效…你能给我一个提示吗，在link提供的示例中，我应该更改什么才能使其工作？。请设置plunker好吗？这工作非常完美，您的回答非常出色，谢谢！；）我有一个小问题，似乎我无法从这些输入读取数据并将其存储到数组中，我尝试了几种方法来实现这一点，但它们不起作用，我不知道为什么…你知道，如何解决它？…@NataliaLomova根据你的输入，我更新了我的答案。如果它对你有效，请投票并将其标记为已接受：）谢谢！我有一个小问题，关于printValue…我应该在这个方法中写些什么-它还没有打印任何东西…是否有可能以这种方式稍微更改FillInBlankComponent，如果我在输入字段中键入单词，它们在开头，黑色和黄色，它会提示“OK”，否则“No”。我是否需要新函数来检查值，或者是否有可能使FillInBlankComponent中的所有内容都可用？这工作非常完美，您的回答非常棒，谢谢！；）我有一个小问题，似乎我无法从这些输入读取数据并将其存储到数组中，我尝试了几种方法来实现这一点，但它们不起作用，我不知道为什么…你知道，如何解决它？…@NataliaLomova根据你的输入，我更新了我的答案。如果它对你有效，请投票并将其标记为已接受：）谢谢！我有一个小问题，关于printValue…我应该在这个方法中写些什么-它还没有打印任何东西…是否有可能以这种方式稍微更改FillInBlankComponent，如果我在输入字段中键入单词，它们在开头，黑色和黄色，它会提示“OK”，否则“No”。我是否需要新的函数来检查值，或者是否可以在FillInBlankComponent中生成所有内容？

export class ParentComponent implements OnInit {

  a: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
  b: string[] = ['blue', 'black'];
  ans: string[] = [];

  constructor() { }

  ngOnInit() {
    this.createAnswers();
  }

  printValue($event) {
    if (this.ans[$event.index] === $event.value) {
      console.log('correct input', $event);
    }
  }

  createAnswers() {

    let ansWithIndex = [];
    this.b.forEach(value => {
      let index = 0;
      let startIndex = 0;
      while ((index = this.a.indexOf(value, startIndex)) > -1) {
        ansWithIndex.push({ index: index, value: value });
        startIndex = index + 1;
      }
    });

    this.ans = ansWithIndex.sort((v1, v2) => v1.index > v2.index ? 1 : -1).map(v1 => v1.value);
  }
}