Question

我有一个问题是从开始到第二个breakline而不是第一个使用substr函数获取字符串的一部分。然后在单击显示长文本或隐藏长文本后，将类与类一起应用于隐藏休息和图标下方的文本。默认为显示的短文本。我的问题是，它显示从开始到第一个分隔线的字符串，而不是我需要的第二个，在我点击图标后它只显示下一部分：一行文字未满。你能不能请各位给我建议。我认为这是text.indexOf（'element'）中的问题。非常感谢你。 PS：抱歉我的英文不好

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>

Answer 1

在这种情况下，我认为分裂是一个更好的朋友，而不是indexOf：

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

我修改了你的小提琴，使用shown和hidden，它似乎做你想做的事情：

http://jsfiddle.net/QpuG8/

Answer 2

您可以使用正则表达式获取第二个<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);

Jquery - 如何使用substr获取字符串的一部分？

2 个答案: