2017-05-08 1 views
1

여러 개의 태그를 포함하는 여러 개의 div 태그와 내용을 p 태그에서 특정 ID와 일치시키지 않는 경우Javascript [ s S] * 너무 욕심입니다.

var str="<div> 
     <p id=\"a\">Sample sentence</p> 
     </div> 

     <div> 
     <p id=\"b\">Sample sentence 2</p> 
     </div>" 

내가 사용했던 정규식이 너무 욕심이 많았는데 두 번째 div 태그와 그 내용을 일치시켜야하지만 위의 div 태그도 캡처하고 있습니다.

<div> 
    <p id="b">Sample sentence 2</p> 
</div> 

어떤 정규식 전문가를가 이것 좀 도와 수 : 나는 전체 문자열을 캡처하지만 난 그냥 캡처 할 사용되는 정규식에 대한

<div>[\s\S]*<p id="b">[\s\S]*<\/div> 

: 여기 내 정규식은?

+3

사용는 DOM 파서는 브라우저/Node.js를, 예를 들어 내 경우,이 사소한 http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js 및 기타 여러 가지 예가 있습니다. –

+3

Regexp 전문가는 regexp로 DOM을 구문 분석/분석/조작하지 말 것을 권합니다. 예를 들어 중첩 된 div가있는 경우 제대로 작동하는 정규 표현식을 작성하는 것은 이론적으로 불가능합니다. –

+0

태그는 정규식으로 구문 분석 할 수 있습니다. 그러나 태그 사이의 열림/닫힘 또는 부족, 구조적 관계는 정규식의 장점이 아닙니다. – sln

답변

1

많은 사람들이 조언 : don't use HTML을 해석/구문 분석/추출하는 정규식. 대신 DOM의 기능을 사용하십시오. 예를 들면 :

var str=` 
 
<div> 
 
    <p id="a">Sample sentence</p> 
 
</div> 
 

 
<div> 
 
    <p id="b">Sample sentence 2</p> 
 
</div>`; 
 

 
var elem = document.createElement('span'); 
 
elem.innerHTML = str; 
 
elem = elem.querySelector('div:nth-child(2)'); 
 
console.log(elem.outerHTML);

1

이 경우에 정규식을 사용하는 경우 당신은 /<div>\n.*<p id=\\"b\\">.*\n.*<\/div>/g을 시도 할 수 있습니다. 그러나 DOM Parser를 사용하는 것이 좋습니다.

const regex = /<div>\n.*<p id=\\"b\\">.*\n.*<\/div>/g; 
 
const str = `<div> 
 
     <p id=\\"a\\">Sample sentence</p> 
 
     </div> 
 

 
     <div> 
 
\t \t \t <p id=\\"b\\">Sample sentence 2</p> 
 
     </div>`; 
 
let m; 
 

 
while ((m = regex.exec(str)) !== null) { 
 
    // This is necessary to avoid infinite loops with zero-width matches 
 
    if (m.index === regex.lastIndex) { 
 
     regex.lastIndex++; 
 
    } 
 
    
 
    // The result can be accessed through the `m`-variable. 
 
    m.forEach((match, groupIndex) => { 
 
     console.log(`Found match, group ${groupIndex}: ${match}`); 
 
    }); 
 
}

관련 문제