使用 javascript/lodash 从输入字符串中解析 html 内容

Question

我有一个这样的字符串：

var inputString = "some sample string with <span data-id='24' data-name='cat'">cat</span> and <span data-id='25' data-name='dog'">dog</span>"

我要做的是将跨度中的数据提取到 json 数组中：

var json = [
    {
        id: '24',
        name: 'cat'
    },
    {
        id:'25',
        name: 'dog'
    }
];

然后从字符串中去掉跨度：

var outputString = "some sample string with cat and dog";

知道如何使用纯 javascript 或 lodash 做到这一点吗？是否有一个函数可以为我提取所有跨度段，还是我需要逐步完成，从第一个元素开始查找跨度元素的索引？任何帮助将不胜感激。

Answer 1

您将字符串解析为 HTML，提取数据属性，然后使用 textContent 获取文本

var inputString = "some sample string with <span data-id='24' data-name='cat'>cat</span> and <span data-id='25' data-name='dog'>dog</span>";

var parser = new DOMParser();
var doc    = parser.parseFromString(inputString, "text/html");
var json   = [].slice.call(doc.querySelectorAll('span')).map(function(span) {
    return {id : span.dataset.id, name : span.dataset.name};
});

var outputString = doc.body.textContent;

console.log(json);
console.log('------');
console.log(outputString);

.as-console-wrapper {max-height: 100%!important; top: 0;}

Answer 2

另一个答案很好，肯定回答了这个问题，但我想提供一个使用正则表达式的替代答案。我不是最擅长正则表达式，但这就是我想出的......

const input = "some sample string with <span data-id='24' data-name='cat'>cat</span> and <span data-id='25' data-name='dog'>dog</span>";

const dataReg = new RegExp(/data-(\w+)=[\'|\"](\w+)[\'|\"] data-(\w+)=[\'|\"](\w+)[\'+\"]/g);

const json = [];

// get the matches and add them to the json array
while ((g = dataReg.exec(input)) !== null) {
  // we only care about matches after idx 1
  let m = {};
  m[g[1]] = g[2];
  m[g[3]] = g[4];
  json.push(m);
}

console.log(json); // [{id: "24", name: "cat"}, {id: "25", name: "dog"}]

// strip the html
let safeStr = input.replace(/<(?:.|\n)*?>/gm, '');

console.log(safeStr);  // some sample string with cat and dog"

您可以在这里预览：https://jsbin.com/quyufoc/edit?js,console