CODEWITHSUNDEEP
javascriptjqueryregex
Learner
Learner

Reputation: 2339

How to extract some <li> (under ol / ul tag) tags from html

I have html string (js string) as below

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
<li>testing4</li>
<li>testing5</li>
<li>testing6</li>
</ol>

I need just 2 to 3 list items, and discard the rest (as below)

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
</ol>

Any idea how to do this? can I use jQuery to return subset of ol? or is there a regex for this?

Edit:

Thanks a lot for your answers. I have a sub question (sorry I should have asked this with original question)

I want to limit just the li corresponding to test class (and not consider the li under testClass2 for removal).

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
<ul class="testClass2">    
 <li>testing4</li>
<li>testing5</li>
</ul>
<li>testing6</li>

</ol>

I tried something like 

html.not('.testClass2').find("li:gt(3)").remove();

but its still considering the inner elements

This seems to work:

html.find("ol>li:gt(4)").remove();

Upvotes: 0

Views: 1010

Answers (5)

blex
blex

Reputation: 25634

Without jQuery

var str = '<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>',
    // Maximum number of <li>s you want to keep
    max = 2,
    temp = document.createElement('div'),
    res = '';

// Put the string in a temporary DOM
temp.innerHTML = str;
// Find <li>s
var lis = temp.getElementsByTagName('li');
for(var i = 0, l=lis.length; i<l && i<max; i++){
    // Append them to a string
    res += lis[i].outerHTML;
}
// Empty the list and insert the ones you kept
temp.childNodes[0].innerHTML = res;

document.body.innerHTML = temp.innerHTML;

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

Another jQuery way:

<div id="demo"></div>

var html = $('<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>');
html.find("li:gt(2)").remove();
$("#demo").append(html);

Upvotes: 1

Benjamin Ray
Benjamin Ray

Reputation: 1870

Here is a fiddle that demonstrates Lye Fish's answer:

https://jsfiddle.net/BenjaminRay/qbj50dms/

HTML:

<ol id="target">
</ol>

Javascript (with jQuery):

var str = "<ol class=\"testClass\">" + 
"<li>test1</li>" +
"<li>testing2</li>" +
"<li>testing3</li>" +
"<li>testing4</li>" +
"<li>testing5</li>" +
"<li>testing6</li>" +
"</ol>";

$(str).children("li").slice(0, 3).appendTo("#target");

Upvotes: 0

Lye Fish
Lye Fish

Reputation: 2568

You can simply convert them to DOM elements, and use normal selectors.

It sounds like you want to append only the first 3 li elements, so just grab the children of the ul, and slice the first 3 before appending to the page.

$(my_string).children("li").slice(0, 3).appendTo("#target");

Upvotes: 2

YMMD
YMMD

Reputation: 3780

If you really have a string and want to use jQuery, then you can parse it, then find all elements with indices higher than 2 and remove them:

var $html = $('<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>');

$html.find('li:gt(2)').remove();

$('<div>').append($html.clone()).html(); // This returns the new HTML code.

$('#wrapper').append($html); // This would append it to a #wrapper element.

Upvotes: 0

Related Questions