パースのhtmlのjavascript/lodash

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

私はプレーンJavaを使用して、これを行うことができる方法上の任意のアイデアスクリプトかロダシ？私のためにすべてのスパンセグメントを抽出する関数がありますか、それとも最初から始まるスパン要素のインデックスを見つけるためにステップごとに行う必要がありますか？どんな助けもありがとう。

Answer 1

あなたは他の答えは素晴らしいですし、間違いなく質問に答える、しかし、HTMLなどの文字列を解析するデータ属性を抽出し、テキスト

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

を取得するためにtextContentを使用したいです私は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