javascript show hide-处理文本内的html元素

Question

I am showing and hiding text with js - with buttons more and 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;
});

the problem i am having is: if the content can have sometimes
<strong class="yellow">text</strong> and 330th char is somewhere in the middle of this strong element, it is cutting and the rest of the whole content is becoming yellow.

how can I detect if more-less is going to cut html element and avoid this html destroying?

here is the fiddle: http://jsfiddle.net/Vvf8d/

Answer 1

您可以尝试使用$('#content').text()代替$('#content').html()