CODEWITHSUNDEEP
javascriptjquery
user3342042
user3342042

Reputation: 241

Jquery - How to get part of a string with substr?

I have a problem to get part of a string with substr function from begining to second breakline not first. Then apply element with class to hide rest and with icon below text after click show long text or hide long text. Default is short text displayed. My problem is that it show string from begining to first breakline not second as I needed and after I click on icon it show only next part: one line of text not full. Can you please guys give me advice. I think it's problem inside text.indexOf('element'). Thank you very much. PS: Sorry for my bad english

JsFiddle: example

JQuery:

$(".content_wrap").each(function() {
    text = $(this).html();
    if (text.length > 350) {
        alert(text.indexOf('<br>'));
        $('.cond-arr').show();
        $(this).html(text.substr(0, text.indexOf('<br>')) + '<span class="elipsis" style="display:none;">' + text.substr(text.indexOf('<br>'), text.indexOf('<br>') + 1) + '</span><a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#"><img class="cond-arr" src="http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png" alt="arrow" /></a>');
        $(".content_wrap > a.elipsis").click(function(e) {
            e.preventDefault(); //prevent from being added to the url
            if ($('span.elipsis').is(':hidden')) {
                $('img.cond-arr').attr('src', 'http://png-5.findicons.com/files/icons/2222/gloss_basic/36/arrow_up.png');
            } else {
                $('img.cond-arr').attr('src', 'http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png');
            }
            $(this).prev('span.elipsis').fadeToggle(500);
        });
    } else {
        $('.cond-arr').hide();
    }
});

HTML:

<div>

<h2>Title</h2>
<span class="content_wrap">Something very long Something very long Something very long 
  <br />Something very long 
  Something very long Something very long Something very long Something 
  <b>very long Something very</b> long Something very long Something very long 
  Something very long Something very long Something very longSomething very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long <b>Something very long</b>
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long <strong>Something very long</strong> 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long
  <br />
  <!-- Text after this break line should be hidden default and show only when i click icon below --> 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long Something very long Something very long 
  Something very long Something very long 
</span>

</div>

Upvotes: 0

Views: 105

Answers (2)

fiskeben
fiskeben

Reputation: 3467

You can use a regular expression to get the index of the second <br>:

var re = new RegExp(/<br \/>/g);
re.exec(text);
re.exec(text); //Yes, we match twice to get the second match

var shorterText = text.substr(0,re.lastIndex);

Upvotes: 0

DavidM
DavidM

Reputation: 1437

Rather than indexOf, I think split is a better friend in this case:

var parts = text.split('<br>');
var shown = parts.slice(0, 2).join('<br>');
var hidden = parts.slice(2).join('<br>');

I modified your fiddle to use shown and hidden and it seemed to do what you want:

http://jsfiddle.net/QpuG8/

Upvotes: 1

Related Questions