javascript显示隐藏处理文本中的html元素

我使用js显示和隐藏文本-使用按钮

more

和

less

var showChar = 330;
var ellipsestext = '...';
var moretext  = "more";
var content = $('#content').html();            
if(content.length > showChar) {             
   var c = content.substr(0, showChar-1);
   var h = content.substr(showChar-1, content.length - showChar);             
   var html = c + '<span class="more">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">' + moretext + '</a></span>';             
   $('#content').html(html);
} 
$(".morelink").click(function(){
  if($(this).hasClass("less")) {
     $(this).removeClass("less");
     $(this).html(moretext);
  } else {
     $(this).addClass("less");
     $(this).html(lesstext);
  }
  $(this).parent().prev().toggle();
  $(this).prev().toggle();
  return false;
});

var showChar=330；
var ellipseText='…'；
var moretext=“更多”；
var content=$（'#content'）.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar-1）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（'#content'）.html（html）；
} 
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});

我遇到的问题是：如果内容有时会出现
<代码>强类=“黄色”>文本<强> >代码>第三百三十字符在这个强元素的中间某处，它正在切割，其余的全部内容变黄。 我怎样才能检测到“更多更少”是否会剪切html元素并避免这种html破坏

---

这里是小提琴：

您可以尝试使用

$（'#content'）.text（）

而不是

$（'#content'）.html（）

您可以用一个示例来设置一个JSFIDLE，说明您正在尝试完成的任务吗？也许有更好的方法来实现你想要做的事情，而不是搞砸.html（）@Kolby我加了小提琴，你能更好地解释一下你想做什么吗？@Kolby dude，阅读我问题的最后一部分，它删除所有

文本

，并替换为正常的

文本

。此工具是否也处理此html元素？