2013-10-28 241 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 
相關問題