0

well I am new here and I don't know much about JavaScript. I saw similar post like this here: How do I add a read more link at the end of a paragraph? but I need some other things which is not available there. I add contents in my gaming site using these BB codes: [url=url to main page of game]Game Name[img]image link[/img][/url] [small]Long description about game[/small]

and my requirements are: 1. Show read more link if the Description exceeds a certain length. 2. I want the Description to be appended with the ...(3 dots) and the read more link. 3. I need same url(url to main page of game) in read more link which I entered in above bbcode.

well it will be tough for anyone to understand my requirements/question. also my english is not so good. you can see this page to understand more about my site. http://only4gamers.wapka.me/site_25.xhtml I have already a js code where I got all requirements but not 3rd requirement. can anyone tell me how I can do this ?

Community
  • 1
  • 1
Only4Gamers
  • 1
  • 1
  • 6

3 Answers3

1

If you are doing it in jquery way.

$('.comments p').text(function(_, txt) {
  if(txt.length > 36){
    txt = txt.substr(0, 36) + "...";
    $(this).parent().append("<a href='#'>Read More</a>");
  }
  $(this).html(txt)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
Vishal Taj PM
  • 1,339
  • 11
  • 23
  • thank u so much vishal. I have already a js code where I got all requirements but not 3rd requirement. can u tell me how I can do this ? – Only4Gamers Apr 22 '17 at 13:24
  • are you using any bbcode to html converter js library in your project ? – Vishal Taj PM Apr 22 '17 at 13:36
  • no I am not using anything like this. my website provider is really different. it's wapka. I didn't see any wapka related question or user here till now. – Only4Gamers Apr 22 '17 at 13:45
  • pick the bbcode and use regex in javascript to convert it to html `url= [url=http://example.com]Game Name[img]example.png[/img][/url]` `url = url.replace(/\[url\="?(.*?)"?\](.*?)\[\/url\]/g, '$2')` `url = url.replace(/\[img\](.*?)\[\/img\]/g, ' ')` will return `Game Name ` – Vishal Taj PM Apr 22 '17 at 14:54
  • thank u so much vishal. can u tell me where I need to place this code in this jQuery code, because I don't know where to place your given code. and also tell me to how add ... there thanks in advance – Only4Gamers Apr 22 '17 at 15:08
  • $(document).ready(function(){ var maxLength = 300; $(".show-read-more").each(function(){ var myStr = $(this).text(); if($.trim(myStr).length > maxLength){ var newStr = myStr.substring(0, maxLength); var removedStr = myStr.substring(maxLength, $.trim(myStr).length); $(this).empty().html(newStr); $(this).append('Read More'); $(this).append('' + removedStr + ''); } }); $(".read-more").click(function(){ $(this).siblings(".more-text").contents().unwrap(); $(this).remove(); – Only4Gamers Apr 22 '17 at 15:11
  • I can't add my complete jQuery code because there is character limits in this forum – Only4Gamers Apr 22 '17 at 15:13
  • just before you appending anchor tag **Read More** you want to replace that with this. i don't know how your picking bbcode logic is and were it is kept in. so after picking the bbcode for url you can convert bbcode with these regex. – Vishal Taj PM Apr 22 '17 at 15:26
  • @VishalTajPM, Your output is not working in the snippet. – user9437856 Jun 17 '20 at 06:26
0
description="This text is really to long.";
var words=description.split(" ");
if(words.length>4){
 description=words.splice(0,4).join(" ")+"...<span>Show</span><div class='hide'>"+words.join(" ")+"</div>";
}
console.log(description);

How you get the description is up to you, and the Show function isnt also implemented yet. Just to give yo a start...

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
0

You can use JavaScript’s substring() method in combination with jQuery’s append() and html() methods to add a read more link at the end of paragraphs if the number of characters inside a paragraph exceeds a certain length.

HTML Code:

<p class="readMore">Class dolor ut sociosqu ad litora venenatis per conubia mollis, per consectetur vestibulum. Maecenas fermentum magna et leo eleifend bibendum. Nullam vitae aliquet nisi. In eu nibh sollicitudin, efficitur ligula lobortis, pharetra tellus. In ac blandit mauris. Aenean rhoncus consequat magna id commodo. Morbi quis eros rutrum libero scelerisque ullamcorper quis varius arcu. Nam vestibulum venenatis mollis. Proin consectetur metus et tortor interdum, eu eleifend mauris condimentum. Nunc varius tortor dolor, id pellentesque libero eleifend ut. </p>

JQuery Code:

$(document).ready(function() {
    var max = 200;
    $(".readMore").each(function() {
        var str = $(this).text();
        if ($.trim(str).length > max) {
            var subStr = str.substring(0, max);
            var hiddenStr = str.substring(max, $.trim(str).length);
            $(this).empty().html(subStr);
            $(this).append(' <a href="javascript:void(0);" class="link">Read more…</a>');
            $(this).append('<span class="addText">' + hiddenStr + '</span>');
        }
    });
    $(".link").click(function() {
        $(this).siblings(".addText").contents().unwrap();
        $(this).remove();
    });
});

You can see an example here: Show read more link if the text exceeds a certain length

thomas
  • 785
  • 8
  • 7