解析字符串以获取数组中的所有值[关闭]答案

【问题标题】：Parse String to get all values inside an array [closed]解析字符串以获取数组中的所有值[关闭]
【发布时间】：2016-10-17 06:50:16
【问题描述】：

现在我有一个看起来像的字符串。

const string = "<h1>Text<widget some-some-type='Some' data-some-id='ryteCAX4kaXFWmpuj'></widget><widget some-some-type='HtmlColumns' data-some-id='cw7gtkTqE49NarsS9'></widget></h1>"

我想知道如何获取data-some-id='ryteCAX4kaXFWmpuj' 中的文本，也就是获取ryteCAX4kaXFWmpuj。

注意字符串上可能有超过 100 个data-some-id

【问题讨论】：

标签： javascript regex string parsing

【解决方案1】：

使用DOMParser解析HTML字符串。

// craete an instance of parser
var parser = new DOMParser();
const string = "<h1>Text<widget some-some-type='Some' data-some-id='ryteCAX4kaXFWmpuj'></widget><widget some-some-type='HtmlColumns' data-some-id='cw7gtkTqE49NarsS9'></widget></h1>"
  // parse the string to convert iti into dom
var doc = parser.parseFromString(string, "text/html");

// get all widget and convert NodeList to array 
// for iterating over them. You can even use Array.from()
// method in latest browsers
[].slice.call(doc.querySelectorAll('widget'))
  // iterate over them 
  .forEach(function(ele) {
    //  get data-* attribute value
    console.log(ele.dataset.someId)
  })

或者使用document.createElement创建一个包含HTML内容的元素并获取内部元素。

// create a div element
var div = document.createElement('div');
const string = "<h1>Text<widget some-some-type='Some' data-some-id='ryteCAX4kaXFWmpuj'></widget><widget some-some-type='HtmlColumns' data-some-id='cw7gtkTqE49NarsS9'></widget></h1>"
// set the html content of the div
div.innerHTML = string;

// get all widget and convert NodeList to array 
// for iterating over them. You can even use Array.from()
// method in latest browsers
[].slice.call(div.querySelectorAll('widget'))
  // iterate over them 
  .forEach(function(ele) {
    //  get data-* attribute value
    console.log(ele.dataset.someId)
  })

【讨论】：

这只是返回一个 data-some-id 而不是我需要的 2
@potatoe26：更新
@potatoe26 然后使用document.querySelectorAll 并遍历它们
@PranavCBalan 你甚至可以使用Array.from()。
效果很好，谢谢