Convert String html to array object type

Question

I have string content html example:

Yjgbhg <img id="image1" src="https://dzlvqfm687ile.cloudfront.net/5940_image-0878eae8-e316-46fc-a776-b3d22e292c55.jpg">Huyju <video src="https://dzlvqfm687ile.cloudfront.net/5824_video.mp4" id="video1" onclick="blurEditor();" onplay="blurEditor();" controls=""></video>

I want pass string to object same

[
  {
    type: "text",
    value: "Yjgbhg"
  },
  {
    type: "img",
    value: "https://dzlvqfm687ile.cloudfront.net/5940_image-0878eae8-e316-46fc-a776-b3d22e292c55.jpg"
  },
  {
    type: "text",
    value: "Huyju"
  },
  {
    type: "text",
    value: "https://dzlvqfm687ile.cloudfront.net/5824_video.mp4"
  },

]

I try used

var regexp = /<img[^>]*src="?([^"\s]+)"?\s*\/>/g;
        console.log(regexp.exec( strHtml ));
        while ( m = regexp.exec( text ) ) {
            urls.push( m[0] );
        }
var regexp = /<video[^>]*src="?([^"\s]+)"?\s*\/>/img;
        while ( m = regexp.exec( text ) ) {
            urls.push( m[0] );
        }
        
        console.log(urls);

to get img and video but it return array null. How I can do it?

CertainPerformance · Accepted Answer · 2018-07-12 04:23:39Z

1

It would probably be a lot easier to use DOMParser:

const input = `Yjgbhg <img id="image1" src="https://dzlvqfm687ile.cloudfront.net/5940_image-0878eae8-e316-46fc-a776-b3d22e292c55.jpg">Huyju  <video src="https://dzlvqfm687ile.cloudfront.net/5824_video.mp4" id="video1" onclick="blurEditor();" onplay="blurEditor();" controls=""></video>`;
const parser = new DOMParser().parseFromString(input, 'text/html');
const text1 = parser.body.childNodes[0].textContent.trim();
const img = parser.body.children[0].src;
const text2 = parser.body.childNodes[2].textContent.trim();
const video = parser.body.children[1].src;
console.log([text1, img, text2, video]);

answered Jul 12, 2018 at 4:23

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

6 Comments

Hoa.Tran Over a year ago

I try import {DOMParser} from 'react-native' but it show _reactNative.DOMParser is not a constructor

CertainPerformance Over a year ago

It's a property of window, not a property of reactNative, as you can see in the snippet

Hoa.Tran Over a year ago

if your code run it will true will only string, don't working with other case

CertainPerformance Over a year ago

What other case? Your question only says I have string

Hoa.Tran Over a year ago

I'm sorry, I editted my question to example string, my bad

|

Robby Cornelissen · Accepted Answer · 2018-07-12 04:45:39Z

You can parse it to a DOM tree, and then map the nodes of the DOM tree to objects.

In the code below assume that you only have text nodes and element nodes for which you want to retrieve the src property. If you have others, you'll have to add some logic to the mapping.

const htmlToObject = (html) => {
  const dom = new DOMParser().parseFromString(html, 'text/html');
  const object = Array.from(dom.body.childNodes).reduce((a, v) => {
    switch(v.nodeType) {
      case 1: // element node
        a.push({type: v.tagName.toLowerCase(), value: v.src});
        break;
      case 3: // text node
        a.push({type: 'text', value: v.textContent.trim()});
        break;
    }

    return a;
  }, []);

  return object;
}

Full snippet:

const htmlToObject = (html) => {
  const dom = new DOMParser().parseFromString(html, 'text/html');
  const object = Array.from(dom.body.childNodes).reduce((a, v) => {
    switch(v.nodeType) {
      case 1:
        a.push({type: v.tagName.toLowerCase(), value: v.src});
        break;
      case 3:
        a.push({type: 'text', value: v.textContent.trim()});
        break;
    }
    
    return a;
  }, []);
  
  return object;
}

const html = 'Yjgbhg <img id="image1" src="https://dzlvqfm687ile.cloudfront.net/5940_image-0878eae8-e316-46fc-a776-b3d22e292c55.jpg">Huyju  <video src="https://dzlvqfm687ile.cloudfront.net/5824_video.mp4" id="video1" onclick="blurEditor();" onplay="blurEditor();" controls=""></video>';

console.log(htmlToObject(html));

Output:

[
  {
    "type": "text",
    "value": "Yjgbhg"
  },
  {
    "type": "img",
    "value": "https://dzlvqfm687ile.cloudfront.net/5940_image-0878eae8-e316-46fc-a776-b3d22e292c55.jpg"
  },
  {
    "type": "text",
    "value": "Huyju"
  },
  {
    "type": "video",
    "value": "https://dzlvqfm687ile.cloudfront.net/5824_video.mp4"
  }
]

It show DOMParser is not defined how I can import it? sorry i'm android developer show I don't know more JS and RN
stackblitz.com/edit/react-ndskyt?file=Hello.js here is my code. Can you check it?
So you just need to add a DOMParser, for example using npmjs.com/package/react-native-html-parser
I installed DOMParser and it working but when I console.log(dom.body.childNodes) it return undefined, it is dom.childNodes and when console.log(Array.from(parsed.childNodes)) it show array 3 item but can't see src in array, I can see namespaceURI but value of node is http://www.w3.org/1999/xhtml both tag video and img

Collectives™ on Stack Overflow

Convert String html to array object type

2 Answers 2

6 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Related