HTML code generation from string using Javascript

Question

I am developing a javascript tool that will extract the string, obtain relevant strings and create html tags.

const string = "Create heading 1 that will have class abc and id xyz";

const elementList = [
{name: 'heading 1', tag: 'h1'},
{name: 'heading 2', tag: 'h2'}
{name: 'paragraph', tag: 'p'},
];

function convertTag(input) {
  return elementList.reduce((acc, a) => {
  const re = new RegExp(a.name,"g");
  return acc.replace(re, a.tag);
  }, input);
}

let initialString = convertTag(string)
//returns create h1 that will have class abc and id xyz
let htmlElement = initialString. split (" ")[1];  // will return h1
let code = `<${htmlElement}> </${htmlElement}>`;

How do I include class and Id? There might be other attributes like alt, src etc. Is there any library to grab the HTML attributes?

Thank you

initialString. split (" ")[6]; and initialString. split (" ")[9];? And then add those to let code...? — Torbjörn Stabo
– Torbjörn Stabo, Commented Jun 5, 2020 at 9:49
@TorbjörnStabo, the problem is the string might consist "Embed an image with source test.c and alt test and class responsive" — Binita Gyawali
– Binita Gyawali, Commented Jun 5, 2020 at 9:54
Can you not list all the attributes and map the string and then take the next word of the attributes? — Binita Gyawali
– Binita Gyawali, Commented Jun 5, 2020 at 9:57
@BinitaGyawali Sure. Have an array with the attributes you'd like to allow, class, id, alt, src, etc. Then extract each using something like string.split(" ")[string.split(" ").indexOf("class")+1]. — Torbjörn Stabo
– Torbjörn Stabo, Commented Jun 5, 2020 at 10:30

enhzflep · Accepted Answer · 2020-06-05 10:56:56Z

The result of running the following code is abc xy being printed in the console. The idea is to search for the prefix "class " and "id " then grab 1 or more alphanumeric characters, bunch em together and return them. The match function returns a bunch of things, including the position within the string. Since we're just interested in the 1st (only!) result, we can grab element 0 from the result, treating it like a simple array.

The half-awake will note that these simple regexes would allow number to start the following group. Rather than grabbing 1 or more alphanumerics, I suppose a more robust solution would be to grab 1 alpha AND 0 or more alphanumerics.

Someone put me onto Expresso as a useful (free) tool to play around with regexes on the desktop.

function test1()
{
    const s = 'Create heading 1 that will have class abc and id xy';
    let cl = s.match(/(?<=class )\w+/)[0];
    let id = s.match(/(?<=id )\w+/)[0];
    console.log(cl,id);
}

Collectives™ on Stack Overflow

HTML code generation from string using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related