Parse contenu HTML à partir d'une chaîne d'entrée en utilisant javascript/lodash

Question

J'ai une chaîne comme ceci:

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>" 

Ce que je suis en train de faire est d'extraire les données des portées dans un tableau JSON:

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

puis dépouilleront hors des travées de la chaîne:

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

Toute idée sur la façon dont je peux le faire en utilisant java plaine script ou lodash? Existe-t-il une fonction qui va extraire tous les segments d'étendue, ou dois-je procéder étape par étape, en recherchant les index des éléments d'étendue en commençant par le premier? Toute aide serait appréciée.

Answer 1

Vous souhaitez analyser la chaîne en HTML, extrait les attributs de données et d'utiliser textContent pour obtenir le texte

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

L'autre réponse est grande et répond vraiment à la question, mais Je voulais fournir une réponse alternative en utilisant regexp. Je ne suis pas le mieux avec regex, mais c'est ce que je suis venu avec ...

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" 

Vous pouvez avoir un aperçu ici: https://jsbin.com/quyufoc/edit?js,console