Truncate before translating: NOT in middle of tags
Please test the attached code. Click on "Spanish"
The problem is that the content is getting truncated in the middle of tags and that breaks the HTML.
The problem is that the content is getting truncated in the middle of tags and that breaks the HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<title>Title</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
google.load("language", "1");
var trans222;
var buffer222;
var limit222;
function chunkify222(inputStr222,size)
{
var chunk=[];
while(inputStr222.length>size)
{
var s=inputStr222.substring(0,size);
var result=s.match(/([\d\D]+)\W+.*$/);
chunk[chunk.length]=result[1];
inputStr222=inputStr222.substring(result[1].length);
}
chunk[chunk.length]=inputStr222;
return chunk;
}
function translateThis222(lang,iii)
{
if(lang && buffer222[iii])
{
if(buffer222[iii] && (buffer222[iii].translated < buffer222[iii].chunks.length) )
{
var idx=buffer222[iii].translated;
google.language.translate( buffer222[iii].chunks[idx], 'en', lang,
function(result222)
{
if (result222.translation)
{
buffer222[iii].chunks[idx]=result222.translation;
}
if( ++buffer222[iii].translated < buffer222[iii].chunks.length )
{
translateThis222(lang,iii);
}
else
{
buffer222[iii].element.innerHTML=buffer222[iii].chunks.join("");
translateThis222(lang,1+iii);
}
}
);
}
}
else
{
buffer222=[];
}
}
if(!document.getElementsByClassName)
{
function walkTheDOM (node, func)
{
func(node);
node = node.firstChild;
while (node)
{
walkTheDOM(node, func);
node = node.nextSibling;
}
}
function _getElementsByClassName (className)
{
var results = [];
walkTheDOM(document.body, function (node)
{
var a, c = node.className, i;
if (c)
{
a = c.split(' ');
for (i=0; i<a.length; i++)
{
if (a[i] === className)
{
results.push(node);
break;
}
}
}
});
return results;
}
}
function translate222(lang) {
scroll(0,0);
if (!window['english']) window['english']=document.getElementsByTagName("body")[0].innerHTML;
if (window['english']) document.getElementsByTagName("body")[0].innerHTML = window['english'];
if(lang=='en') return false;
trans222 = (document.getElementsByClassName)?document.getElementsByClassName('textContent'):_getElementsByClassName('textContent');
limit222=500;
var i222 = 0;
buffer222=[];
i222=-1,limit=trans222.length;
while(++i222<limit){
buffer222[i222]={element:trans222[i222], chunks:chunkify222(trans222[i222].innerHTML, limit222),translated:0 };
}
trans222 = null;
translateThis222(lang,0);
}
/* ]]> */
</script>
</head>
<body>
<h1 class="textContent">Hello World</h1>
<a href="#" onclick="translate222('es'); return false;">Spanish</a><br />
<a href="#" onclick="translate222('de'); return false;">German</a><br />
<a href="#" onclick="translate222('ru'); return false;">Russian</a><br />
<a href="#" onclick="translate222('en'); return false;">English</a><br />
<div class="textContent sdafsdfsd ">
<p>As an exogenous tree grows, it creates growth rings as new wood is laid down concentrically over the old wood. In species growing in areas with seasonal climate changes, wood growth produced at different times of the year may be visible as alternating light and dark, or soft and hard, rings of wood. In temperate climates, and tropical climates with a single wet-dry season alternation, the growth rings are annual. Each pair of light and dark rings being one year of growth; <span style="color: #ffaaff">this text should be purple</span> and in areas with two wet and dry seasons each year. There may be two pairs of light and dark rings each year; and in some (mainly semi-desert regions with irregular rainfall), there may be a new growth ring with each rainfall. In tropical rainforest regions, with constant year-round climate, growth is continuous and the growth rings are not visible nor is there a change in the wood texture.</p>
<p>There are many types of trees.</p>
<ul>
<li class="treeItem"><a href="/wiki/Adoxaceae" rel="nofollow" title="Adoxaceae">Adoxaceae</a> (Moschatel family)
<ul>
<li class="treeItem"><a href="/wiki/Moschatel" rel="nofollow" title="Moschatel" class="mw-redirect">Adoxa moschatellina Moschatel</a></li>
<li class="treeItem"><strong>Sambucus</strong>, <a href="/wiki/Elderberry" rel="nofollow" title="Elderberry" class="mw-redirect">Elderberry</a></li>
<li class="treeItem"><strong>Sinadoxa corydalifolia</strong>, <a href="/wiki/Sinadoxa" rel="nofollow" title="Sinadoxa">Sinadoxa</a></li>
<li class="treeItem"><strong>Viburnum</strong>, <a href="/wiki/Viburnum" rel="nofollow" title="Viburnum">Viburnum</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Altingiaceae" rel="nofollow" title="Altingiaceae">Altingiaceae</a> (Sweetgum family)
<ul>
<li class="treeItem"><strong>Liquidambar</strong>, <a href="/wiki/Sweetgum" rel="nofollow" title="Sweetgum">Sweetgum</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Anacardiaceae" rel="nofollow" title="Anacardiaceae">Anacardiaceae</a> (Cashew family)
<ul>
<li class="treeItem"><strong><a href="/wiki/Anacardium" rel="nofollow" title="Anacardium">Anacardium</a></strong>, <a href="/wiki/Cashew" rel="nofollow" title="Cashew">Cashew</a> etc.</li>
<li class="treeItem"><strong>Mangifera</strong>, <a href="/wiki/Mango" rel="nofollow" title="Mango">Mango</a></li>
<li class="treeItem"><strong><a href="/wiki/Pistacia" rel="nofollow" title="Pistacia">Pistacia</a></strong>, <a href="/wiki/Pistachio" rel="nofollow" title="Pistachio">Pistachio</a> etc.</li>
<li class="treeItem"><strong>Rhus</strong>, <a href="/wiki/Sumac" rel="nofollow" title="Sumac">Sumac</a></li>
<li class="treeItem"><strong><a href="/wiki/Toxicodendron" rel="nofollow" title="Toxicodendron">Toxicodendron</a></strong>, <a href="/wiki/Lacquer_tree" rel="nofollow" title="Lacquer tree" class="mw-redirect">Lacquer tree</a> etc.</li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Apocynaceae" rel="nofollow" title="Apocynaceae">Apocynaceae</a> (Dogbane family)
<ul>
<li class="treeItem"><strong><a href="/wiki/Pachypodium" rel="nofollow" title="Pachypodium">Pachypodium</a></strong></li>
</ul>
</li>
<li class="treeItem">Aquifoliaceae (Holly family)
<ul>
<li class="treeItem"><strong>Ilex</strong>, <a href="/wiki/Holly" rel="nofollow" title="Holly">Holly</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Araliaceae" rel="nofollow" title="Araliaceae">Araliaceae</a> (Ivy family)
<ul>
<li class="treeItem"><strong>Kalopanax septemlobus</strong>, <a href="/wiki/Kalopanax" rel="nofollow" title="Kalopanax">Kalopanax</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Betulaceae" rel="nofollow" title="Betulaceae">Betulaceae</a> (Birch family)
<ul>
<li class="treeItem"><strong>Alnus</strong>, <a href="/wiki/Alder" rel="nofollow" title="Alder">Alder</a></li>
<li class="treeItem"><strong>Betula</strong>, <a href="/wiki/Birch" rel="nofollow" title="Birch">Birch</a></li>
<li class="treeItem"><strong>Carpinus</strong>, <a href="/wiki/Hornbeam" rel="nofollow" title="Hornbeam">Hornbeam</a></li>
<li class="treeItem"><strong>Corylus</strong>, <a href="/wiki/Hazel" rel="nofollow" title="Hazel">Hazel</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Bignoniaceae" rel="nofollow" title="Bignoniaceae">Bignoniaceae</a> (Trumpet Creeper family)
<ul>
<li class="treeItem"><strong>Catalpa</strong>, <a href="/wiki/Catalpa" rel="nofollow" title="Catalpa">Catalpa</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cactaceae" rel="nofollow" title="Cactaceae" class="mw-redirect">Cactaceae</a> (Cactus family)
<ul>
<li class="treeItem"><strong>Carnegiea gigantea</strong>, <a href="/wiki/Saguaro" rel="nofollow" title="Saguaro">Saguaro</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cannabaceae" rel="nofollow" title="Cannabaceae">Cannabaceae</a> (Cannabis family)
<ul>
<li class="treeItem"><strong>Celtis</strong>, <a href="/wiki/Celtis" rel="nofollow" title="Celtis">Hackberry</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cornaceae" rel="nofollow" title="Cornaceae">Cornaceae</a> (Dogwood family)
<ul>
<li class="treeItem"><strong>Cornus</strong>, <a href="/wiki/Dogwood" rel="nofollow" title="Dogwood" class="mw-redirect">Dogwood</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Dipterocarpaceae" rel="nofollow" title="Dipterocarpaceae">Dipterocarpaceae</a> family
<ul>
<li class="treeItem"><strong>Dipterocarpus</strong>, <a href="/wiki/Garjan" rel="nofollow" title="Garjan" class="mw-redirect">Garjan</a></li>
<li class="treeItem"><strong><a href="/wiki/Shorea" rel="nofollow" title="Shorea">Shorea</a></strong>, <a href="/wiki/Shorea_robusta" rel="nofollow" title="Shorea robusta">Sal</a> etc.</li>
</ul>
</li>
</ul>
<ul>
<li class="treeItem"><a href="/wiki/Ebenaceae" rel="nofollow" title="Ebenaceae">Ebenaceae</a> (Persimmon family)
<ul>
<li class="treeItem"><strong>Diospyros</strong>, <a href="/wiki/Diospyros" rel="nofollow" title="Diospyros">Persimmon</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Ericaceae" rel="nofollow" title="Ericaceae">Ericaceae</a> (Heath family)
<ul>
<li class="treeItem"><strong>Arbutus</strong>, <a href="/wiki/Arbutus" rel="nofollow" title="Arbutus">Arbutus</a></li>
</ul>
</li>
<li class="treeItem">Eucommiaceae (Eucommia family)
<ul>
<li class="treeItem"><strong>Eucommia ulmoides</strong>, <a href="/wiki/Eucommia" rel="nofollow" title="Eucommia">Eucommia</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Fabaceae" rel="nofollow" title="Fabaceae">Fabaceae</a> (Pea family)
<ul>
<li class="treeItem"><strong>Acacia</strong>, <a href="/wiki/Acacia" rel="nofollow" title="Acacia">Acacia</a></li>
<li class="treeItem"><strong>Caesalpinia</strong>, <a href="/wiki/Brazilwood" rel="nofollow" title="Brazilwood" class="mw-redirect">Brazilwood</a> etc.</li>
<li class="treeItem"><strong><a href="/wiki/Gleditsia" rel="nofollow" title="Gleditsia">Gleditsia</a></strong>, <a href="/wiki/Honey_locust" rel="nofollow" title="Honey locust">Honey locust</a> etc.</li>
<li class="treeItem"><strong>Laburnum</strong>, <a href="/wiki/Laburnum" rel="nofollow" title="Laburnum">Laburnum</a></li>
<li class="treeItem"><strong><a href="/wiki/Robinia" rel="nofollow" title="Robinia">Robinia</a></strong>, <a href="/wiki/Black_locust" rel="nofollow" title="Black locust" class="mw-redirect">Black locust</a> etc.</li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Fagaceae" rel="nofollow" title="Fagaceae">Fagaceae</a> (Beech family )
<ul>
<li class="treeItem"><strong>Castanea</strong>, <a href="/wiki/Chestnut" rel="nofollow" title="Chestnut">Chestnut</a></li>
<li class="treeItem"><strong>Fagus</strong>, <a href="/wiki/Beech" rel="nofollow" title="Beech">Beech</a></li>
<li class="treeItem"><strong><a href="/wiki/Lithocarpus" rel="nofollow" title="Lithocarpus">Lithocarpus</a></strong>, <a href="/wiki/Tanoak" rel="nofollow" title="Tanoak" class="mw-redirect">Tanoak</a> etc.</li>
<li class="treeItem"><strong>Quercus</strong>, <a href="/wiki/Oak" rel="nofollow" title="Oak">Oak</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ASKER
Actually, that solution does NOT work. I thought it did but it doesn't. Try it with with text I posted in this question and you will see the problem.
The problem is that the JavaScript sometimes truncates text in the middle of a tag. So this:
Hello <strong class="foo">world</strong>
sometimes becomes this:
Hello <strong
plus this:
class="foo">world</strong>
Solving the problem will require logic and skill. But the first step is understanding the problem.
Thanks for the help!
The problem is that the JavaScript sometimes truncates text in the middle of a tag. So this:
Hello <strong class="foo">world</strong>
sometimes becomes this:
Hello <strong
plus this:
class="foo">world</strong>
Solving the problem will require logic and skill. But the first step is understanding the problem.
Thanks for the help!
ASKER
First the HTML tags need to be removed and replaced with placeholders that will not be translated. Then the content, along with the placeholders, needs to be translated. Lastly, the placeholders need to be replaced with the original HTML tags.
I am going to spin this question into smaller pieces.
Here is the first piece:
https://www.experts-exchange.com/questions/26073433/JavaScript-Put-all-opening-HTML-tags-in-array.html
I am going to spin this question into smaller pieces.
Here is the first piece:
https://www.experts-exchange.com/questions/26073433/JavaScript-Put-all-opening-HTML-tags-in-array.html
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, hielo but your code does not work.
Test it by clicking on "Spanish" then scroll to the bottom. You will see code like this:
Robinia </ Strong>,Negro <langosta/ A>, etc
I think the only way to fix this is to:
1. Remove all the tags
2. Translate the text
3. Add the tags back
Here is the code for removing the tags and adding them back:
https://www.experts-exchange.com/questions/26074437/JavaScript-Replace-placeholders-with-HTML-tags-from-array.html#32290852
Test it by clicking on "Spanish" then scroll to the bottom. You will see code like this:
Robinia </ Strong>,Negro <langosta/ A>, etc
I think the only way to fix this is to:
1. Remove all the tags
2. Translate the text
3. Add the tags back
Here is the code for removing the tags and adding them back:
https://www.experts-exchange.com/questions/26074437/JavaScript-Replace-placeholders-with-HTML-tags-from-array.html#32290852
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<title>Title</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
google.load("language", "1");
var trans222;
var buffer222;
var limit222;
function chunkify222(inputStr222,size)
{
var chunk=[];
while(inputStr222.length>size)
{
var temp=null;
var s=inputStr222.substring(0,size);
var result=s.match(/([\d\D]+)\W+.*$/);
if((temp=result[1].match(/(<(\/)?[a-z][^>]*>?)$/i)) )
{
result[1]=result[1].substring( 0, result[1].length-temp[1].length);
}
chunk[chunk.length]=result[1];
inputStr222=inputStr222.substring(result[1].length);
if( temp && temp[2] )
{
chunk[chunk.length-1] = chunk[chunk.length-1] + inputStr222.substring(0, 1+inputStr222.indexOf(">"));
inputStr222 = inputStr222.substring(1+inputStr222.indexOf(">"))
}
}
chunk[chunk.length]=inputStr222;
return chunk;
}
function translateThis222(lang,iii)
{
if(lang && buffer222[iii])
{
if(buffer222[iii] && (buffer222[iii].translated < buffer222[iii].chunks.length) )
{
var idx=buffer222[iii].translated;
google.language.translate( buffer222[iii].chunks[idx], 'en', lang,
function(result222)
{
if (result222.translation)
{
buffer222[iii].chunks[idx]=result222.translation;
}
if( ++buffer222[iii].translated < buffer222[iii].chunks.length )
{
translateThis222(lang,iii);
}
else
{
buffer222[iii].element.innerHTML=buffer222[iii].chunks.join("");
translateThis222(lang,1+iii);
}
}
);
}
}
else
{
buffer222=[];
}
}
if(!document.getElementsByClassName)
{
function walkTheDOM (node, func)
{
func(node);
node = node.firstChild;
while (node)
{
walkTheDOM(node, func);
node = node.nextSibling;
}
}
function _getElementsByClassName (className)
{
var results = [];
walkTheDOM(document.body, function (node)
{
var a, c = node.className, i;
if (c)
{
a = c.split(' ');
for (i=0; i<a.length; i++)
{
if (a[i] === className)
{
results.push(node);
break;
}
}
}
});
return results;
}
}
function translate222(lang) {
scroll(0,0);
if (!window['english']) window['english']=document.getElementsByTagName("body")[0].innerHTML;
if (window['english']) document.getElementsByTagName("body")[0].innerHTML = window['english'];
if(lang=='en') return false;
trans222 = (document.getElementsByClassName)?document.getElementsByClassName('textContent'):_getElementsByClassName('textContent');
limit222=100;
var i222 = 0;
buffer222=[];
i222=-1,limit=trans222.length;
while(++i222<limit){
buffer222[i222]={element:trans222[i222], chunks:chunkify222(trans222[i222].innerHTML, limit222),translated:0 };
}
trans222 = null;
translateThis222(lang,0);
}
/* ]]> */
</script>
</head>
<body>
<h1 class="textContent">Hello World</h1>
<a href="#" onclick="translate222('es'); return false;">Spanish</a><br />
<a href="#" onclick="translate222('de'); return false;">German</a><br />
<a href="#" onclick="translate222('ru'); return false;">Russian</a><br />
<a href="#" onclick="translate222('en'); return false;">English</a><br />
<div class="textContent">
<p>There are many types of trees.</p>
<ul>
<li class="treeItem"><a href="/wiki/Adoxaceae" rel="nofollow" title="Adoxaceae">Adoxaceae</a> (Moschatel family)
<ul>
<li class="treeItem"><a href="/wiki/Moschatel" rel="nofollow" title="Moschatel" class="mw-redirect">Adoxa moschatellina Moschatel</a></li>
<li class="treeItem"><strong>Sambucus</strong>, <a href="/wiki/Elderberry" rel="nofollow" title="Elderberry" class="mw-redirect">Elderberry</a></li>
<li class="treeItem"><strong>Sinadoxa corydalifolia</strong>, <a href="/wiki/Sinadoxa" rel="nofollow" title="Sinadoxa">Sinadoxa</a></li>
<li class="treeItem"><strong>Viburnum</strong>, <a href="/wiki/Viburnum" rel="nofollow" title="Viburnum">Viburnum</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Altingiaceae" rel="nofollow" title="Altingiaceae">Altingiaceae</a> (Sweetgum family)
<ul>
<li class="treeItem"><strong>Liquidambar</strong>, <a href="/wiki/Sweetgum" rel="nofollow" title="Sweetgum">Sweetgum</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Anacardiaceae" rel="nofollow" title="Anacardiaceae">Anacardiaceae</a> (Cashew family)
<ul>
<li class="treeItem"><strong><a href="/wiki/Anacardium" rel="nofollow" title="Anacardium">Anacardium</a></strong>, <a href="/wiki/Cashew" rel="nofollow" title="Cashew">Cashew</a> etc.</li>
<li class="treeItem"><strong>Mangifera</strong>, <a href="/wiki/Mango" rel="nofollow" title="Mango">Mango</a></li>
<li class="treeItem"><strong><a href="/wiki/Pistacia" rel="nofollow" title="Pistacia">Pistacia</a></strong>, <a href="/wiki/Pistachio" rel="nofollow" title="Pistachio">Pistachio</a> etc.</li>
<li class="treeItem"><strong>Rhus</strong>, <a href="/wiki/Sumac" rel="nofollow" title="Sumac">Sumac</a></li>
<li class="treeItem"><strong><a href="/wiki/Toxicodendron" rel="nofollow" title="Toxicodendron">Toxicodendron</a></strong>, <a href="/wiki/Lacquer_tree" rel="nofollow" title="Lacquer tree" class="mw-redirect">Lacquer tree</a> etc.</li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Apocynaceae" rel="nofollow" title="Apocynaceae">Apocynaceae</a> (Dogbane family)
<ul>
<li class="treeItem"><strong><a href="/wiki/Pachypodium" rel="nofollow" title="Pachypodium">Pachypodium</a></strong></li>
</ul>
</li>
<li class="treeItem">Aquifoliaceae (Holly family)
<ul>
<li class="treeItem"><strong>Ilex</strong>, <a href="/wiki/Holly" rel="nofollow" title="Holly">Holly</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Araliaceae" rel="nofollow" title="Araliaceae">Araliaceae</a> (Ivy family)
<ul>
<li class="treeItem"><strong>Kalopanax septemlobus</strong>, <a href="/wiki/Kalopanax" rel="nofollow" title="Kalopanax">Kalopanax</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Betulaceae" rel="nofollow" title="Betulaceae">Betulaceae</a> (Birch family)
<ul>
<li class="treeItem"><strong>Alnus</strong>, <a href="/wiki/Alder" rel="nofollow" title="Alder">Alder</a></li>
<li class="treeItem"><strong>Betula</strong>, <a href="/wiki/Birch" rel="nofollow" title="Birch">Birch</a></li>
<li class="treeItem"><strong>Carpinus</strong>, <a href="/wiki/Hornbeam" rel="nofollow" title="Hornbeam">Hornbeam</a></li>
<li class="treeItem"><strong>Corylus</strong>, <a href="/wiki/Hazel" rel="nofollow" title="Hazel">Hazel</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Bignoniaceae" rel="nofollow" title="Bignoniaceae">Bignoniaceae</a> (Trumpet Creeper family)
<ul>
<li class="treeItem"><strong>Catalpa</strong>, <a href="/wiki/Catalpa" rel="nofollow" title="Catalpa">Catalpa</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cactaceae" rel="nofollow" title="Cactaceae" class="mw-redirect">Cactaceae</a> (Cactus family)
<ul>
<li class="treeItem"><strong>Carnegiea gigantea</strong>, <a href="/wiki/Saguaro" rel="nofollow" title="Saguaro">Saguaro</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cannabaceae" rel="nofollow" title="Cannabaceae">Cannabaceae</a> (Cannabis family)
<ul>
<li class="treeItem"><strong>Celtis</strong>, <a href="/wiki/Celtis" rel="nofollow" title="Celtis">Hackberry</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Cornaceae" rel="nofollow" title="Cornaceae">Cornaceae</a> (Dogwood family)
<ul>
<li class="treeItem"><strong>Cornus</strong>, <a href="/wiki/Dogwood" rel="nofollow" title="Dogwood" class="mw-redirect">Dogwood</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Dipterocarpaceae" rel="nofollow" title="Dipterocarpaceae">Dipterocarpaceae</a> family
<ul>
<li class="treeItem"><strong>Dipterocarpus</strong>, <a href="/wiki/Garjan" rel="nofollow" title="Garjan" class="mw-redirect">Garjan</a></li>
<li class="treeItem"><strong><a href="/wiki/Shorea" rel="nofollow" title="Shorea">Shorea</a></strong>, <a href="/wiki/Shorea_robusta" rel="nofollow" title="Shorea robusta">Sal</a> etc.</li>
</ul>
</li>
</ul>
<ul>
<li class="treeItem"><a href="/wiki/Ebenaceae" rel="nofollow" title="Ebenaceae">Ebenaceae</a> (Persimmon family)
<ul>
<li class="treeItem"><strong>Diospyros</strong>, <a href="/wiki/Diospyros" rel="nofollow" title="Diospyros">Persimmon</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Ericaceae" rel="nofollow" title="Ericaceae">Ericaceae</a> (Heath family)
<ul>
<li class="treeItem"><strong>Arbutus</strong>, <a href="/wiki/Arbutus" rel="nofollow" title="Arbutus">Arbutus</a></li>
</ul>
</li>
<li class="treeItem">Eucommiaceae (Eucommia family)
<ul>
<li class="treeItem"><strong>Eucommia ulmoides</strong>, <a href="/wiki/Eucommia" rel="nofollow" title="Eucommia">Eucommia</a></li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Fabaceae" rel="nofollow" title="Fabaceae">Fabaceae</a> (Pea family)
<ul>
<li class="treeItem"><strong>Acacia</strong>, <a href="/wiki/Acacia" rel="nofollow" title="Acacia">Acacia</a></li>
<li class="treeItem"><strong>Caesalpinia</strong>, <a href="/wiki/Brazilwood" rel="nofollow" title="Brazilwood" class="mw-redirect">Brazilwood</a> etc.</li>
<li class="treeItem"><strong><a href="/wiki/Gleditsia" rel="nofollow" title="Gleditsia">Gleditsia</a></strong>, <a href="/wiki/Honey_locust" rel="nofollow" title="Honey locust">Honey locust</a> etc.</li>
<li class="treeItem"><strong>Laburnum</strong>, <a href="/wiki/Laburnum" rel="nofollow" title="Laburnum">Laburnum</a></li>
<li class="treeItem"><strong><a href="/wiki/Robinia" rel="nofollow" title="Robinia">Robinia</a></strong>, <a href="/wiki/Black_locust" rel="nofollow" title="Black locust" class="mw-redirect">Black locust</a> etc.</li>
</ul>
</li>
<li class="treeItem"><a href="/wiki/Fagaceae" rel="nofollow" title="Fagaceae">Fagaceae</a> (Beech family )
<ul>
<li class="treeItem"><strong>Castanea</strong>, <a href="/wiki/Chestnut" rel="nofollow" title="Chestnut">Chestnut</a></li>
<li class="treeItem"><strong>Fagus</strong>, <a href="/wiki/Beech" rel="nofollow" title="Beech">Beech</a></li>
<li class="treeItem"><strong><a href="/wiki/Lithocarpus" rel="nofollow" title="Lithocarpus">Lithocarpus</a></strong>, <a href="/wiki/Tanoak" rel="nofollow" title="Tanoak" class="mw-redirect">Tanoak</a> etc.</li>
<li class="treeItem"><strong>Quercus</strong>, <a href="/wiki/Oak" rel="nofollow" title="Oak">Oak</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ASKER
Got it working, thanks.
stop working ?