JavaScript Tips: Replacing HTML Placeholders with Object Data

Introduction

In dynamic web applications, there’s often a need to replace placeholders in HTML templates with actual data. For example, populating an HTML template with user-specific information or updating image sources dynamically based on certain conditions. This article explores a powerful JavaScript function, replacePlaceholders, which does exactly that.

The Function: What Does It Do?

The replacePlaceholders function is a versatile utility that:

Replaces Dynamic Placeholders: It substitutes {{placeholders}} in an HTML string with corresponding values from a provided data object.
Optimizes Image Tags: It checks data-src attributes of <img> tags and updates the src attribute if the data-src contains a specific domain.

How It Works

Replacing Placeholders

The function uses a regex pattern (/{{(.*?)}}/g) to find placeholders wrapped in double curly braces (e.g., {{user.name}}). It then:

Splits the placeholder key (user.name) into parts (['user', 'name']) and drills down into the provided data object to find the value.
Replaces the placeholder with the corresponding value or an empty string if no value exists.

Optimizing Image Tags

It searches for <img> tags with data-src attributes and performs the following:

If the data-src contains some-regex-value, it ensures the src attribute matches the data-src value.
If the data-src does not match this condition, the <img> tag remains unchanged.

Code Example

Here’s the function in action:

const replacePlaceholders = (html, data) => {
  return html
    .replace(/{{(.*?)}}/g, (match, key) => {
      const keys = key.split(".");
      let value = data;
      keys.forEach((k) => {
        value = value?.[k];
      });
      return value || "";
    })
    .replace(
      /<img([^>]*?)data-src="(.*?)"([^>]*?)src="(.*?)"([^>]*?)>/g,
      (match, beforeDataSrc, dataSrcValue, betweenSrc, srcValue, afterSrc) => {
        if (dataSrcValue.includes("some-regex-value")) {
          return `<img${beforeDataSrc}data-src="${dataSrcValue}"${betweenSrc}src="${dataSrcValue}"${afterSrc}>`;
        }
        return match;
      }
    );
};

Example Usage

Input HTML Template:

<div>
  <h1>{{user.name}}</h1>
  <p>{{user.bio}}</p>
  <img data-src="https://api.ngr.ltd/image1.jpg" src="placeholder.jpg" />
  <img data-src="https://example.com/image2.jpg" src="placeholder.jpg" />
</div>

Data Object:

const data = {
  user: {
    name: "John Doe",
    bio: "Web Developer and Blogger",
  },
};

Output HTML:

<div>
  <h1>John Doe</h1>
  <p>Web Developer and Blogger</p>
  <img data-src="https://api.ngr.ltd/image1.jpg" src="https://api.ngr.ltd/image1.jpg" />
  <img data-src="https://example.com/image2.jpg" src="placeholder.jpg" />
</div>

Key Features

Nested Key Access: Supports deep object properties using dot notation (e.g., user.name).
Fallback Handling: Substitutes placeholders with an empty string if no matching value is found.
Custom Image Handling: Ensures src attributes are updated based on specific conditions.

Real-World Applications

Email Templates: Dynamically populate email content with user-specific details.
Content Management Systems (CMS): Update HTML templates with dynamic data fetched from APIs.
Image Optimization: Automatically update image tags to improve performance for specific domains.

Conclusion

The replacePlaceholders function is a powerful utility for processing dynamic HTML templates. By combining placeholder replacement with conditional logic for images, it ensures templates are not only filled with accurate data but also optimized for specific use cases. This approach is particularly useful for applications that require dynamic content rendering or serve content from multiple domains.
Please like, share and subscribe for more useful content.

Dynamic HTML Replacement with JavaScript: Replacing Placeholders and Optimizing Images

Table of contents