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

Question

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();

Answer 1

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");

Answer 2

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);

Answer 3

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.

Answer 4

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; 

Answer 5

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");