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

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

本文关键字：事件描述 200个 字符 显示 jQuery javascript      更新时间：2023-09-26

我有大约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个字符。

这个问题有点模糊，代码片段也不可读，但我会给你一个通用的例子。

大概，您是通过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/

<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>
相关文章：