CODEWITHSUNDEEP
javascripthtmlregexstringsubstring
owsata
owsata

Reputation: 1225

Get substring from html string in javascript

I am officially declaring myself as dumb !!! I'm quite good with regex but the javascript regex is getting on my nerves:

I have following html string:

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

I need to get all that is inside the UL element based on the text that is inside the aa class div.

I tried the following:

textItem = 'TextOne';

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

While writing this question i discovered an error (one tiny extra character) in my regex that didn't let it match but for all those looking for something specific - javascript / regular expression / html string / html substring - its working fine.

Edited

I'm thankful for all the additions to this - but there is one additional aspect i'm using regex - being that i am matching a text item which i am getting through a variable first for the regex pattern.

Solution

Having received a few hints and suggestions i came up with the following which may help someone else as well:

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/

The next ul is important because that solves the issue regarding nested ULs and any other regex based solution where i couldn't match a first level UL (having internal one or more Uls).

Upvotes: 2

Views: 2046

Answers (2)

owsata
owsata

Reputation: 1225

Solution

Having received a few hints and suggestions i came up with the following which may help someone else as well:

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/

The "next ul" is important because that solves the issue regarding nested ULs and any other regex based solution where i couldn't match a first level UL (having internal one or more Uls).

Upvotes: 1

h2ooooooo
h2ooooooo

Reputation: 39542

You can use a simple indexOf method for this:

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

Upvotes: 0

Related Questions