2013-10-28 193 views
2

我正式宣布自己是愚蠢的!我用正则表达式相当不错,但JavaScript的正则表达式是让我的神经:从javascript中的html字符串获取子字符串

我有以下HTML字符串:

htmlString = '<div class="aa">TextOne</div><ul><li>one</li></ul>'; 

我需要得到所有这些都是基于文本的UL元素内部的在aa类div里面。

我试过如下:

textItem = 'TextOne'; 

ulRegex = new RegExp('<div class="aa">'+textItem+'</div><ul>(.*)</ul>', "igm"); 
ul = ulRegex.exec(htmlString); 

在写这个问题,我在我的正则表达式发现错误(一个小的额外字符)没有让它匹配,但对于所有那些寻找一些具体的事情 - 的JavaScript /正则表达式/ html字符串/ html子字符串 - 它的工作正常。

编辑

我很感激所有的添加到这一点 - 但有一个额外的方面我使用正则表达式 - 是,我很匹配对此我通过一个变量中获得第一个文本项为正则表达式模式。

解决方案

在接受了一些提示和建议,我想出了可以帮助别人,以及以下:

htmlString = '<div class="aa">TextOne</div><ul><li>one</li></ul>'; 

textItem = 'TextOne'; 

tempdiv = $('<div/>'); 
tempdiv.html(htmlString); 
ul = tempdiv.find('div.aa:contains('+textItem+')').next('ul'); 

$('#res').append(ul); 

http://jsfiddle.net/sdXpJ/

下一个UL是重要的,因为解决了有关嵌套UL和任何其他基于正则表达式的解决方案的问题,在这些解决方案中,我无法匹配第一级UL(具有内部一个或多个Uls)。

+2

不要用正则表达式解析HTML,你可能可以使它工作,但不要走这条路。改为使用XML/HTML解析器。 –

+2

我有点困惑。看起来你有一个“工作”的正则表达式。一个小细节,使用'。*?'而不是'。*'来匹配不确定性。不需要使用'm'修饰符。为了完整起见,请不要忘记添加'\ s *' – HamZa

+1

@iambriansreed您的意思是'$('div.aa')。next('ul')。html()' –

回答

1

解决方案

在接受了一些提示和建议,我想出了这可能有助于以下别人也是:

htmlString = '<div class="aa">TextOne</div><ul><li>one</li></ul>'; 

textItem = 'TextOne'; 

tempdiv = $('<div/>'); 
tempdiv.html(htmlString); 
ul = tempdiv.find('div.aa:contains('+textItem+')').next('ul'); 

$('#res').append(ul); 

http://jsfiddle.net/sdXpJ/

“下一UL”是很重要的,因为这解决了有关嵌套的上行线路及其他任何基于正则表达式解决方案,我可以不匹配第一级UL(内有一个或多个用户接口)的问题。

0

你可以使用这个简单的indexOf方法:

function str_between(str, searchStart, searchEnd, caseSensitive, offset) { 
    var fullString = str; 

    caseSensitive = caseSensitive || false; 
    offset = offset || 0; 

    if (!caseSensitive) { 
     fullString = fullString.toLowerCase(); 
     searchStart = searchStart.toLowerCase(); 
     searchEnd = searchEnd.toLowerCase(); 
    } 

    var startPosition = fullString.indexOf(searchStart, offset); 
    if (startPosition > -1) { 
     var endPosition = fullString.indexOf(searchEnd, startPosition + 1); 
     if (endPosition > -1) { 
      return str.substr(startPosition + searchStart.length, endPosition - startPosition - searchEnd.length + 1); 
     } 
    } 
    return false; 
} 

> var htmlString = '<div class="aa">TextOne</div><ul><li>one</li></ul>'; 

> str_between(htmlString, '<ul>', '</ul>'); 
"<li>one</li>" 

> str_between(htmlString, '<UL>', '</UL>'); 
"<li>one</li>" 

> str_between(htmlString, '<UL>', '</UL>', true); 
false 
相关问题