如何在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>