如何在jQuery或javascript中显示事件描述的前200个字符？

Question

我大约有10个事件，每个事件都包含长说明。通过使用tinymce编辑器添加说明。在添加说明的同时，我可以插入html标签并可以为某些div制作样式...

但是问题是我在显示事件时需要显示前200个字符，这里我不知道如何在不更改设计的情况下进行显示。

事件描述示例如下：

<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>

请在这里指导我如何只显示前200个字符。

Answer 1

这个问题有点含糊，并且代码片段不可读，但是我给你一个通用的例子。

大概是通过AJAX调用拉入此事件字符串-收到此字符串时，只需检查它是否长于200个字符，如果是，则使用substr来获取字符串的前200个字符。

参见代码段，但与此类似：

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>