文字列を置換したいです

Question

すみません、教えてください。
以下の文字列があります。

value = "abc";

この文字列を以下のように置換したいです。

【求める実行結果】内容：aは<ab>で囲む、bは<bc>で囲む、cは<ca>で囲む

<ab>a<ab><bc>b<bc><ca>c<ca>

自分でやったことは以下のコードでreplace置換を繰り返したんですが、当然1回目の変換結果含めて2回目が走ってしまいうまく行きません..。

動作デモ - stackblitz

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  result: string;
  value = "abc";

  ngOnInit() {
    const query1 = "a";
    const query2 = "b";
    const query3 = "c";

    // 1回目の変換
    const result1 = this.value.replace(new RegExp(query1, "gi"), match => {
      return "<ab>" + match + "<ab>";
    });
    // 2回目の変換
    const result2 = result1.replace(new RegExp(query2, "gi"), match => {
      return "<bc>" + match + "<bc>";
    });
    // 3回目の変換
    const result3 = result2.replace(new RegExp(query3, "gi"), match => {
      return "<ca>" + match + "<ca>";
    });
    this.result = result3;
  }
}

どなたか良い方法あればご教示の程よろしくお願いいたします。

Answer 1

Typescriptではなく、Javascriptでの回答になりますが

const value = "abc";
const dictionary = 
{
	a:"<ab>",
	b:"<bc>",
	c:"<ca>"
};
const keys = Object.keys(dictionary).sort((a,b)=>b.length-a.length||a>b);
const pattern = new RegExp(keys.join("|"),"gi");
const result = value.replace(pattern,m=>`${dictionary[m.toLowerCase()]}${m}${dictionary[m.toLowerCase()]}`);
console.log(result);

念の為、変換の対象が増えたり2文字以上になっても対応できるようにしてあります。
こんなんでどうでしょう。

※追記
HTMLのタグ風にしたいなら、こんな感じです。

const value = "abc";
const dictionary = 
{
	a:"ab",
	b:"bc",
	c:"ca"
};
const keys = Object.keys(dictionary).sort((a,b)=>b.length-a.length||a>b);
const pattern = new RegExp(keys.join("|"),"gi");
const result = value.replace(pattern,m=>`<${dictionary[m.toLowerCase()]}>${m}</${dictionary[m.toLowerCase()]}>`);
console.log(result);

Comments

[inukujira]

ありがとうございます！！素晴らしいです！！
すみません、１つ相談なんですがHTMLタグのように「<ab>a</ab>...」最後に/を入れたい場合はどのようにすれば良いでしょうか＞＜；

[inukujira]

ありがとうございました！！完璧でした！

Answer 2

export class AppComponent {
  result: string = "";
  value = "abc";

  ngOnInit() {
    const query1 = "a";
    const query2 = "b";
    const query3 = "c";

    // 1回目の変換
    const result1 = this.value.replace(new RegExp(query1, "gi"), match => {
      this.result += "<ab>" + match + "<ab>";
      return "";
    });
    // 2回目の変換
    const result2 = result1.replace(new RegExp(query2, "gi"), match => {
      this.result += "<bc>" + match + "<bc>";
      return "";
    });
    // 3回目の変換
    const result3 = result2.replace(new RegExp(query3, "gi"), match => {
      this.result += "<ca>" + match + "<ca>";
      return "";
    });
    // this.result = result3;
  }
}

Answer 3

let value = "abc";

const query1 = "a";
const query2 = "b";
const query3 = "c";

const array = value.split("");
const result: string = array.reduce((res: string, ch: string): string => {
    if(ch==query1){
        return res+"<ab>" + ch + "<ab>";
    }else if(ch==query2){
        return res+"<bc>" + ch + "<bc>";
    }else if(ch==query3){
        return res+"<ca>" + ch + "<ca>";
    }
    return res+ch;
}, "");
console.log(result);