Replace certain words with input fields Javascript/Angular2

Question

I have a a string 'I like orange, blue, black, pink, rose, yellow, white, black'. Is it possible to replace words yellow and black with input fields, so I could type in my own colours?

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

So I would like to have something like this link

Is it possible to do this with javascript or angular2?..

Please, help me...

Here is full code

part2.component.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>'); });

  }
}

And I get data from DataService, so from here

import { Injectable } from '@angular/core';

          @Injectable()
export class DataService {
              getData2() {
              let items3: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
              return items3;
            }
            getData3(){
              let items4: string[] = ['black', 'yellow'];
              return items4;
            }
          }

Answer 1

Here is the code from component part:

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/>');
    });
 }

The above function will set exact html string that you wants to implement

Next step is here :

Inject <input> in innerHTML angular 2

Angular 2 doesn't support injection of input field directly , so you have to follow this link.

Answer 2

Updated:

After understanding your requirement, I have changed implementation technique and updated answer accordingly. Instead of using angular-pipe(recommended to use for display purpose) I have created simple component as follows

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] });
  }
}

Use above component where you want to render it like this

<fill-in-blank [textline]="a" [fields]="b" (valueChanged)="printValue($event)"></fill-in-blank>

To build your array of answer you need to call following method in ngInit. This is how your parent component should look like

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);
  }
}

Make sure you have added FillInBlankComponent in Module Declaration section.