2017-05-08 28 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>[\s\S]*<p id="b">[\s\S]*<\/div> 

,因为我用它捕获整个字符串,但我只是想捕捉的正则表达式:

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

任何正则表达式大师在那里,可以帮助我吗?

+3

使用DOM解析器,如果你是内浏览器/ node.js的,例如这是微不足道的http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js&在这里很多其他的例子。 –

+3

正则表达式大师会建议您不要尝试使用正则表达式解析/分析/操作DOM。例如,理论上不可能编写一个在存在嵌套div的情况下表现正确的正则表达式。 – 2017-05-08 18:04:31

+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解析器。

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}`); 
 
    }); 
 
}