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做到这一点的任何想法？是否有一个函数可以为我提取所有跨区段，或者我是否需要一步一步地查找span元素的索引从第一个开始？任何帮助将不胜感激。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

使用javascript / lodash

2 个答案: