查找具有特定内容的DIV标签

时间:2015-05-29 09:43:28

标签: javascript html regex

我正在尝试将DIV与值55的复选框匹配。但我得到所有DIV,包括正确的DIV。

如何让它变得非贪婪?

body.innerHTML.match(/(<div*?)([\s\S]*?)(value="55"?)([\s\S]*?)<\/div>?/)[0]

<div class="hidden" data-sort="0"> 
  <input type="checkbox" value="52">one
</div>
<div class="" data-sort="1"> 
  <input type="checkbox" value="53">two
</div>
<div class="" data-sort="2"> 
  <input type="checkbox" value="55">three
</div>
<div class="" data-sort="3"> 
  <input type="checkbox" value="56">four
</div>

3 个答案:

答案 0 :(得分:2)

如果您将数据作为字符串并且只需使用普通JS,则可以使用以下正则表达式:

<div\b((?:(?!<\/?div\b)[\s\S])*?value=["']?55\b["']?[\s\S]*?)<\/div>

请参阅demo

var re = /<div\b((?:(?!<\/?div\b)[\s\S])*?value=["']?55\b["']?[\s\S]*?)<\/div>/g; 
var str = '<div class="hidden" data-sort="0"> \n  <input type="checkbox" value="52">one\n</div>\n<div class="" data-sort="1"> \n  <input type="checkbox" value="53">two\n</div>\n<div class="" data-sort="2"> \n  <input type="checkbox" value="55">three\n</div>\n<div class="" data-sort="3"> \n  <input type="checkbox" value="56">four\n</div>';
 
if ((m = re.exec(str)) !== null) {
    
    document.getElementById("res").value = m[0];
}
<input id="res" size="70"/>

答案 1 :(得分:0)

要定位div元素(DOMNode),您可以这样查询:

var el = document.querySelector('input[value="55"]').parentNode;

如果您想获得完整的HTML代码,则可以获取outerHTML

var html = el.outerHTML; // <div class="" data-sort="2">.....</div>

答案 2 :(得分:0)

如果你不仅限于使用jQuery,这是一个解决方案,

$('input[value="55"]').parent()