Splitting string with HTML markup into separate objects using JS

Question

I am trying to split different parts of a string into new objects depending on whether there is HTML markup. This is what I have tried, I have also tried with split(), however, I can't find a way to pull the content within the HTML markups.

const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>'
const richTexts = [];

example.match(/\<.*?\>/g).forEach((e) => {
  if (e.includes('<a')) {
    richTexts.push({
       type: 'hyperlink',
       content: ''
    })
  } else if (e.includes('<strong') {
    richTexts.push({
       type: 'bold',
       content: ''
    })
  } else {
    richTexts.push({
       type: 'text',
       content: ''
    })
  }
})

console.log(richTexts);

Desired output is:

[
  {
    type: 'text',
    content: 'The lucky stars is an astrology themed '
  },
  {
    type: 'hyperlink',
    content: 'game'
  },
  {
    type: 'text',
    content: ' and it consists of '
  },
  {
    type: 'bold',
    content: 'thousands of.'
  }
]

Create a temporary element and put the string into as innerHTML, then use a DOM method to get the elements. — Teemu
– Teemu, Commented Sep 18, 2021 at 17:00
developer.mozilla.org/en-US/docs/Web/API/DOMParser might be helpful — georg
– georg, Commented Sep 18, 2021 at 18:12

Nikola Pavicevic · Accepted Answer · 2021-09-18 17:17:59Z

1

Not elegant but solve your example:

const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>'
const richTexts = [];

const res = example.split('<')
res.forEach(r => {
  let obj = {}
  if(r.includes('>')) {
    if(r.includes('strong')){
      obj.type= "bold"
    } else if (r.includes('href')) {
      obj.type = "hyperlink"
    } else {
      obj.type = 'text'
    }
  } else {
    obj.type = 'text'
  }
  
  r = r.slice(r.indexOf('>') + 1, r.length)
  
  if(r.length) {
    obj.content = r
    richTexts.push(obj)
  }
})

console.log(richTexts)

answered Sep 18, 2021 at 17:17

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AbsoluteBeginner · Accepted Answer · 2021-09-19 09:58:26Z

1

My suggestion:

const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>';
const richTexts = [];
var strType;

example.split(/((?:[^\s<]*<\w[^>]*>[\s\S]*?<\/\w[^>]*>)+[^\s<]*)/).filter(Boolean).forEach(e => {

  strType = 'text';
  if (e.includes('<a')) {
    strType = 'hyperlink'
  } else if (e.includes('<strong')) {
    strType = 'bold'
  };

  richTexts.push({
    type: strType,
    content: strType === 'text' ? e : e.replace(/(<([^>]+)>)/g, '')
  });

});

console.log(richTexts);

edited Sep 19, 2021 at 9:58

answered Sep 19, 2021 at 6:28

AbsoluteBeginner

2,2833 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Splitting string with HTML markup into separate objects using JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related