Creating an HTML string from an array in JavaScript

Question

Creating an HTML string from an array in JavaScript

Hi there, I'm in need of some assistance with a JavaScript task. Can anyone help?

I'm looking to create a JavaScript function that can take an array and return the corresponding HTML string.

For example: [tagName, child1, child2, ...]

• The tag name will always be the first entry in the array and will be a string.

• The children can be arrays or strings.

• Strings are treated as plain text, not HTML markup.

• Arrays are considered nested elements.

• No support for attributes, comments, etc., only elements and text.

• Empty tags should be self-closing.

• Consecutive text nodes will be merged in the final output.

• No libraries, build processes, or transpilers are permitted.

Examples:

['div']                       => '<div/>'

['h1', 'Text']                => '<h1>Text</h1>'

['span', 'More', 'Text']      => '<span>MoreText</span>'

['a', ['b', 'More'], ' Text'] => '<a><b>More</b> Text</a>'

['p', '<b>Text</b>']          => '<p>&lt;b&gt;Text&lt;/b&gt;</p>'

This is my current code using objects instead of arrays. Any suggestions on how to convert it?

var obj = {
  "h1": 'text',
  "a": {"b": 'more'}, // nested element
  "text": '', // empty tag
  "p": '<b>text</b>' // with HTML
};

var finalString = '';

function createHTML(obj){
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) { 

    if (obj[prop] == '[object Object]') {

      finalString += "<" + prop + ">";
      createHTML(obj[prop]);
      finalString += "</" + prop + ">";

    } else {
      if (obj[prop] == '') {
        finalString += "<" + prop + "/>";
      } else {
        finalString += "<" + prop + ">" + encodeURI(obj[prop]) + "</" + prop + ">";
      }
    }
  } 
}
}

createHTML(obj);

console.log(finalString);
// "<h1>text</h1><a><b>more</b></a><text/><p>%3Cb%3Etext%3C/b%3E</p>"

javascript arrays

Answer 1

Answer №1

One way to approach this is by using recursion:

Creating DOM element objects :

function genHTML(arr) {
  // create a DOM element object with the first array item
  var element = document.createElement(arr[0]);
  // iterate over the remaining elements
  arr.slice(1).forEach(function(value) {
    // if the item is an array, recursively call the function and append the returned element
    if (Array.isArray(value))
      element.appendChild(genHTML(value));
    // else generate a text node and append
    else
      element.appendChild(document.createTextNode(value));
  })
  // return the reference to the element
  return element;
}


[['div'],['h1', 'Text'],['span', 'More', 'Text'],['a', ['b', 'More'], ' Text'],['p', '<b>Text</b>']].forEach(function(data) { 
  // log the HTML content using outerHTML property
  console.log(JSON.stringify(data) + ' => ' + genHTML(data).outerHTML);
})

Using simple string concatenation.

function genHTML(arr) {
  // generate opening tag
  var string = '<' + arr[0] + '>';
  // iterate over the remaining elements
  arr.slice(1).forEach(function(value) {
    // if the item is an array, recursively call the function and concatenate the returned value
    if (Array.isArray(value))
      string += genHTML(value);
    // else concatenate the string after handling special characters
    else
      string += value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  })
  // return the result with the closing tag
  return string + '</' + arr[0] + '>';
}

[['div'],['h1', 'Text'],['span', 'More', 'Text'],['a', ['b', 'More'], ' Text'],['p', '<b>Text</b>']].forEach(function(data) { 
  // log the generated markup
  console.log(JSON.stringify(data) + ' => ' + genHTML(data));
})

Answer 2

One way to approach this is by using recursion:

Creating DOM element objects :

function genHTML(arr) {
  // create a DOM element object with the first array item
  var element = document.createElement(arr[0]);
  // iterate over the remaining elements
  arr.slice(1).forEach(function(value) {
    // if the item is an array, recursively call the function and append the returned element
    if (Array.isArray(value))
      element.appendChild(genHTML(value));
    // else generate a text node and append
    else
      element.appendChild(document.createTextNode(value));
  })
  // return the reference to the element
  return element;
}


[['div'],['h1', 'Text'],['span', 'More', 'Text'],['a', ['b', 'More'], ' Text'],['p', '<b>Text</b>']].forEach(function(data) { 
  // log the HTML content using outerHTML property
  console.log(JSON.stringify(data) + ' => ' + genHTML(data).outerHTML);
})

Using simple string concatenation.

function genHTML(arr) {
  // generate opening tag
  var string = '<' + arr[0] + '>';
  // iterate over the remaining elements
  arr.slice(1).forEach(function(value) {
    // if the item is an array, recursively call the function and concatenate the returned value
    if (Array.isArray(value))
      string += genHTML(value);
    // else concatenate the string after handling special characters
    else
      string += value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  })
  // return the result with the closing tag
  return string + '</' + arr[0] + '>';
}

[['div'],['h1', 'Text'],['span', 'More', 'Text'],['a', ['b', 'More'], ' Text'],['p', '<b>Text</b>']].forEach(function(data) { 
  // log the generated markup
  console.log(JSON.stringify(data) + ' => ' + genHTML(data));
})

Creating an HTML string from an array in JavaScript

Answer №1

Similar questions

What is the best way to utilize unique slash commands in Slack threads?

What is the best method for accessing the HTML element specified in React JSX?

After hiding an element's visibility, getElementById is unable to locate the element

Steer clear of displaying the latest model directly

Utilizing Regex Patterns to Manipulate CSS Attributes

Conceal the 'Load More' button once the outcome falls under or equals the specified CI limit

Creating captchas seems like a mistake in reasoning to me

Tips for organizing the output of items from the .getJSON method

Enhancing functionality through the press of a button

What is causing the bars to move forward on the x-axis starting from the second one?

Exploring Ruby array functions and their results

Is there a way to extract JSON keys that begin with a numerical value?

Clicking the delete button in Firebase to remove an item

Updating values in mongoDB using Express.js and axios: A step-by-step guide

Checking the validity of an HTML tag with the contenteditable attribute set to true

Changing Color of Specific Sticky Note in React - Customize Color of Individual Note Without Affecting Others

Service Worker's fetch event is not triggered upon registering the service worker

Sophisticated filter - Conceal Ancestry

Utilizing the Authorization Header in WebSocket within a React Electron Application

Updating data in MongoDB using a POST request in Angular 2