javascript - 使用 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>"

我想做的是将 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;}