How to display first 200 characters of event description in jQuery or javascript?

Question

I have a around 10 evevts,each event contains long description.Description is added by using tinymce editor.While adding description I can insert html tags and can make style for some divs...

But the problem is here I need to display first 200 characters while displaying events.Here I dont know how to display without altering design.

example of event description is as follow:

<p style="margin: 0.5em 0px; line-height: 22.4px; color: #252525; font-family: sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong>AngularJS</strong><span class="Apple-converted-space">&nbsp;</span>(commonly referred to as "<strong>Angular</strong>" or "<strong>Angular.js</strong>") is an<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Open-source software" href="https://en.wikipedia.org/wiki/Open-source_software">open-source</a><span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Web application framework" href="https://en.wikipedia.org/wiki/Web_application_framework">web application framework</a><span class="Apple-converted-space">&nbsp;</span>mainly maintained by<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Google" href="https://en.wikipedia.org/wiki/Google">Google</a>and by a community of individual developers and corporations to address many of the challenges encountered in developing<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Single-page application" href="https://en.wikipedia.org/wiki/Single-page_application">single-page applications</a>. It aims to simplify both the development and the<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Software testing" href="https://en.wikipedia.org/wiki/Software_testing">testing</a><span class="Apple-converted-space">&nbsp;</span>of such applications by providing a framework for client-side<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Model&ndash;view&ndash;controller" href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">model&ndash;view&ndash;controller</a><span class="Apple-converted-space">&nbsp;</span>(MVC) and<span class="Apple-converted-space">&nbsp;</span><a class="mw-redirect" style="text-decoration: none; color: #0b0080; background: none;" title="Model View ViewModel" href="https://en.wikipedia.org/wiki/Model_View_ViewModel">model&ndash;view&ndash;viewmodel</a><span class="Apple-converted-space">&nbsp;</span>(MVVM) architectures, along with components commonly used in<span class="Apple-converted-space">&nbsp;</span><a class="mw-redirect" style="text-decoration: none; color: #0b0080; background: none;" title="Rich Internet Application" href="https://en.wikipedia.org/wiki/Rich_Internet_Application">rich Internet applications</a>.</p>
<p style="margin: 0.5em 0px; line-height: 22.4px; color: #252525; font-family: sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">The AngularJS library works by first reading the<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="HTML" href="https://en.wikipedia.org/wiki/HTML">HTML</a><span class="Apple-converted-space">&nbsp;</span>page, which has embedded into it additional custom<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="HTML attribute" href="https://en.wikipedia.org/wiki/HTML_attribute">tag attributes</a>. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="JavaScript" href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a><span class="Apple-converted-space">&nbsp;</span>variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="JSON" href="https://en.wikipedia.org/wiki/JSON">JSON</a><span class="Apple-converted-space">&nbsp;</span>resources.</p>
<p style="margin: 0.5em 0px; line-height: 22.4px; color: #252525; font-family: sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">According to<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="JavaScript" href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a><span class="Apple-converted-space">&nbsp;</span>analytics service<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Libscore" href="https://en.wikipedia.org/wiki/Libscore">Libscore</a>, AngularJS is used on the websites of<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="NBC" href="https://en.wikipedia.org/wiki/NBC">NBC</a>,<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Walgreens" href="https://en.wikipedia.org/wiki/Walgreens">Walgreens</a>,<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="Intel" href="https://en.wikipedia.org/wiki/Intel">Intel</a>,<span class="Apple-converted-space">&nbsp;</span><a class="mw-redirect" style="text-decoration: none; color: #0b0080; background: none;" title="Sprint Nextel" href="https://en.wikipedia.org/wiki/Sprint_Nextel">Sprint</a>,<span class="Apple-converted-space">&nbsp;</span><a style="text-decoration: none; color: #0b0080; background: none;" title="ABC News" href="https://en.wikipedia.org/wiki/ABC_News">ABC News</a>, and approximately 8,400 other sites out of 1 million tested in July 2015.<sup id="cite_ref-1" class="reference" style="line-height: 1; unicode-bidi: -webkit-isolate; font-size: 11.2px; font-weight: normal; font-style: normal;"><a style="text-decoration: none; color: #0b0080; white-space: nowrap; background: none;" href="https://en.wikipedia.org/wiki/AngularJS#cite_note-1">[1]</a></sup></p>

Please guide me here how I can display only first 200 characters.

Answer 1

The question is a bit vague and the code snippet is unreadable, but I'll give you a generic example.

Presumably, you're pulling this event string in through an AJAX call — when you receive this string, simply check if it's longer than 200 characters and if it is, use substr to take the first 200 characters of the string.

See snippet, but something along the lines of this:

var el = document.getElementById('content');
var longString = '<long string here...>';

if(longString.length > 200) {
    el.textContent = longString.substr(0, 200) + '...';
}

 var longString = "Bacon ipsum dolor amet pancetta bacon turkey bresaola. Capicola drumstick ham hock porchetta jowl ham bresaola beef ribs kielbasa turkey pork chop meatball. Ground round prosciutto alcatra hamburger. T-bone andouille rump, picanha shank ribeye tongue sausage landjaeger porchetta prosciutto kevin. " + "Andouille spare ribs tail turkey porchetta meatloaf chicken landjaeger. Pastrami tongue meatball bresaola, leberkas pork belly capicola chuck porchetta corned beef rump. T-bone pastrami sirloin shankle, ham cupim shank kielbasa tri-tip frankfurter chicken short ribs. Turkey bacon drumstick, ham hock turducken spare ribs ham swine pork pork loin. Spare ribs drumstick turducken, frankfurter sausage leberkas hamburger pork loin short ribs shankle tongue salami beef ribs chicken alcatra."; var el = document.getElementById('content'); if(longString.length > 200) { el.textContent = longString.substr(0, 200) + '...'; } 

 <p id="content"> </p> 

jsFiddle: http://jsfiddle.net/uu79pmgb/

Answer 2

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
    function myFunction() {
        var str = '<p>Hello i am digpal singh chauhan</p>';
        var res = str.substring(1, 5);
        document.getElementById("demo").innerHTML = res;
    }
</script>