Vue Js Bold Specific Part of String

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Bold Specfic Part of String</h3>
   <p v-html="formattedString"></p>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          originalString: "This is an example string with some bold text. Another bold example.",
          boldParts: ["example", "bold"],
        };
      },
      computed: {
        formattedString() {
          // Escape special characters in each bold part
          const escapedBoldParts = this.boldParts.map(part => part.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&"));

// Create a regular expression with the escaped bold parts and the 'g' flag for global search
          const regex = new RegExp(`(${escapedBoldParts.join('|')})`, 'gi');

// Split the original string into parts using the regular expression
          const parts = this.originalString.split(regex);

// Wrap the matching parts in <b> tags
          const formattedParts = parts.map((part) => {
            if (this.boldParts.includes(part.toLowerCase())) {
              return `<b>${part}</b>`;
            }
            return part;
          });

// Join the formatted parts into a single string
          return formattedParts.join('');
        },
      },
    });
    app.mount("#app");
  </script>
  <style>
   #app {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }
  </style>
</body>

</html>