Web Design Leaves

const html = '<p class="foo">Foo</p>';

// 最初に & を置換
const escapedHtml = html.replace(/&/g, "&amp;")
  .replace(/"/g, "&quot;")
  .replace(/'/g, "&#39;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;");

console.log(escapedHtml);  // &lt;p class=&quot;foo&quot;&gt;Foo&lt;/p&gt; 

const html = '<p class="foo">Foo</p>';

let escapedHtml = html.replace(/&/g, "&amp;"); // 最初に & を置換
escapedHtml = escapedHtml.replace(/"/g, "&quot;");
escapedHtml = escapedHtml.replace(/'/g, "&#39;");
escapedHtml = escapedHtml.replace(/</g, "&lt;");
escapedHtml = escapedHtml.replace(/>/g, "&gt;");

const html = '<p class="foo">Foo</p>';

// 特殊文字の配列 （先頭に &）
const specialChars = ["&", "<", ">" ,'"', "'"];
// 文字実体参照の配列 （先頭に &amp;）
const entityRefs = ["&amp;", "&lt;", "&gt;", "&quot;", "&#39;"];

// 置換後の結果を入れる変数（最初は置換対象の文字列を代入）
let escapedHtml = html;

for(let i=0; i<specialChars.length; i++){
  // 特殊文字の配列の要素から正規表現パターンを作成して replace() の第1引数に指定し、第2引数には対応する文字実体参照の配列の要素を指定
  escapedHtml = escapedHtml.replace(new RegExp(specialChars[i], 'g'), entityRefs[i]);
}

console.log(escapedHtml);  // &lt;p class=&quot;foo&quot;&gt;Foo&lt;/p&gt;

const html = '<p class="foo">Foo</p>';

// 第1引数に < > & ' " のいずれにもマッチするように文字クラス [] を使い、g フラグを指定
const escapedHtml = html.replace(/[<>&'"]/g, (match) => {
  // キーが特殊文字で値が文字実体参照のプロパティを持つオブジェクトを定義
  const escapeMap = {
    '<': '&lt;',
    '>': '&gt;',
    '&': '&amp;',
    "'": '&#39;',
    '"': '&quot;'
  };
  // オブジェクトのキーは変数なので、値にアクセスするには角括弧 [ ] を使用。ドット演算子(.)ではアクセスできない。
  return escapeMap[match];
});

console.log(escapedHtml); // &lt;p class=&quot;foo&quot;&gt;Foo&lt;/p&gt;

const target = document.querySelector('.highlight-text');

if (target) {
  const targetData = target.dataset;

  // data-target-text 属性の値にメタ文字が含まれていればメタ文字の前に \\ を追加してエスケープ
  const targetTextValue = targetData.targetText.trim().replace(/[\^\$\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}]/g, (match) => {
    return '\\' + match;
  });

  const colorToSet = targetData.textColor.trim();
  if (targetTextValue && colorToSet) {
    target.innerHTML = target.innerHTML.replace(
      new RegExp(targetTextValue, 'g'),
      // 第2引数を関数にする場合の例（関数にする理由は特にありませんが）
      (match) => `<span style="color:${colorToSet};">${match}</span>`
    );
  }
}

<p class="highlight-texts" data-target-texts="ipsum, sit, elit" data-text-colors="#499455, tomato, #313d98">Lorem ipsum dolor sit amet consectetur, adipisicing elit amet. </p>

// 対象の要素を取得
const target = document.querySelector('.highlight-texts');

// 対象の要素が存在すれば
if (target) {
  // その要素のカスタムデータ属性（dataset プロパティ）を取得
  const targetData = target.dataset;

  // data-target-text 属性 と data-text-color 属性の値が空でなければ
  if (targetData.targetTexts && targetData.textColors) {
    // 値をカンマで分割（targetTextValues と colorToSets は配列）
    const targetTextValues = targetData.targetTexts.split(',');
    const colorToSets = targetData.textColors.split(',');

    // replace() の第1引数に指定する正規表現パターンに使用する文字列の初期化
    let targetTextsRegExValue = '';
    // キーに対象の文字列（data-target-text）、値に色の文字列（data-text-color）のプロパティを持つオブジェクトの初期化
    let colorMap = {};

    for (let i = 0; i < targetTextValues.length; i++) {
      // 対象の文字列にメタ文字が含まれていれば \\ をメタ文字の前に追加してエスケープ
      const targetText = targetTextValues[i].trim().replace(/[\^\$\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}]/g, (match) => {
        return '\\' + match;
      });

      // replace() の第1引数に指定する正規表現パターンに使用する文字列を作成
      if (targetText) {
        if (i === 0) {
          targetTextsRegExValue = targetText;
        } else {
          targetTextsRegExValue = targetTextsRegExValue + '|' + targetText;
        }

        // colorMap オブジェクトのプロパティのキー（メタ文字をエスケープするために追加した \\ を除去）
        const keyVal = targetText.replace(/\\(.)/g, (match, p1) => {
          // エスケープ文字を除去してメタ文字のみに置換（返す）
          return p1;
        });

        // colorMap オブジェクトにプロパティを追加（キー：対象の文字列、値：色）
        colorMap[keyVal] = colorToSets[i] ? colorToSets[i].trim() : colorToSets[0].trim();
      }
    }

    // replace() の第1引数に指定する正規表現パターンを作成
    const targetTextsRegEx = new RegExp(targetTextsRegExValue, 'g');

    // 指定された文字列を指定された背景色で表示
    target.innerHTML = target.innerHTML.replace(targetTextsRegEx, (match) => {
      // マッチした文字列にインラインスタイルで対応する背景色を設定
      return `<span class="highlight-target" style="background-color: ${colorMap[match]}">${match}</span>`;
    });
  }
}

.highlight-target {
  padding: 3px;
  color: #fff;
}