Изменить цвет фона выбранного текста, HTML JQUERY

Question

Недавно я настроил существующий код для сегментации простого текста в четыре класса, выделив часть текста, затем раскрась его, после чего я получаю текст каждого класса, чтобы сохранить его в моем дб, этот код http://jsfiddle.net/ouss88/t53wtquf/9/ работает хорошо, но я хочу, чтобы отказано вложенного пролет (HTML тега, которые определяют класс) Exemple:

<span class="class1"> text text text </span> ----> accepted 
<span class= class1"> tex <span class="class 2> text </span> text </span>--> not accepted. 

, что я должен добавить к этому коду http://jsfiddle.net/ouss88/t53wtquf/9/

PS: После того, как я выбираю часть текста, я наведите курсор мыши на один из четырех классов (1.2.3.4), чтобы покрасить фон из выбранного текста, tou может попробовать самостоятельно по этой ссылке выше, я просто хочу отказаться от встроенного класса

Answer 1

Сделайте что-нибудь подобное, более компактное. Я думаю, вы поняли.

$('table td').mouseenter(function(){ 
 
    $(this).addClass('hilited'+$(this).attr('id')); 
 
}).mouseleave(function(){ 
 
    $(this).removeClass('hilited'+$(this).attr('id')); 
 
});

.hilited1{color:green} 
 
.hilited2{color:red} 
 
.hilited3{color:blue} 
 
.hilited4{color:yellow}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
    <tr> <td id="1"> hover on me for Class1 </td> </tr> 
 
    <tr> <td id="2"> hover on me for Class2 </td> </tr> 
 
    <tr> <td id="3"> hover on me for Class3 </td> </tr> 
 
    <tr> <td id="4"> hover on me for Class4 </td> </tr> 
 
    
 
</tr> 
 
</table>