Question

我有字符串内容的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>

我希望将字符串传递给相同的对象

[
  {
    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"
  },

]

我尝试用过

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);

获取img和视频，但它返回数组null。我该怎么办？

Answer 1

使用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]);

Answer 2

您可以将其解析为DOM树，然后将DOM树的节点映射到对象。

在下面的代码中，假设您仅具有要检索其src属性的文本节点和元素节点。如果还有其他人，则必须在映射中添加一些逻辑。

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;
}

完整摘要：

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));

输出：

[
  {
    "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"
  }
]

将String html转换为数组对象类型

2 个答案: