구문 분석 HTML 콘텐츠를 자바 스크립트/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"; 

나는이 사용하는 일반 자바를 할 수있는 방법에 대한 아이디어 스크립트 또는 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;}

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