解析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任何想法腳本還是lodash？是否有將提取所有爲我跨度段，或做我需要做一步一步來，發現從第一個開始span元素的索引中的作用？任何幫助，將不勝感激。

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