Vue Js Bold Specific Part of String Vue.js, a progressive JavaScript framework, offers a powerful and flexible way to build user interfaces. One common requirement in web development is to highlight or bold specific parts of a string dynamically. In this tutorial, we’ll explore how to achieve this using Vue.js, providing a practical example for better understanding.

Vue.js: How to Bold a Specific Part of a String?

Before we get into the technical details, let’s understand the goal. We want to take a sentence and make specific words bold. For example, turning “This is an example string with some bold text. Another bold example.” into “This is an <b>example</b> string with some <b>bold</b> text. Another <b>bold</b> example.”

The HTML code sets up a Vue.js application with a heading and a paragraph. The paragraph uses the v-html directive to bind to the formattedString property, which will contain the dynamically formatted string. This sets the stage for Vue.js to manipulate and display the bolded parts of the original string.

Vue Js Bold Specific Part of String Example

 <div id="app">
    <h3>Vue Js Bold Specfic Part of String</h3>
   <p v-html="formattedString"></p>
  </div>

Applying Bold Styling to Specific Parts of a String in Vue.js Implementation

The Vue.js script defines an application with data properties for the original string and an array of words to be bolded. Using a computed property, it processes the original string, escapes special characters, creates a regular expression for matching, and dynamically wraps the specified words with <b> tags. The result is displayed in the paragraph, showcasing the Vue.js-driven dynamic formatting.

<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>

Output of Vue Js Bold Specfic Part of String

In conclusion, this tutorial demonstrates how to dynamically bold specific parts of a string using Vue.js. The example Vue.js application processes an original string and a predefined array of words to be bolded. It utilizes a computed property to escape special characters, create a regular expression for matching, and dynamically wrap the specified words with <b> tags.