如何在jQuery或javascript中显示事件描述的前200个字符?
我有大约10个evevts,每个事件都包含很长的描述。描述是使用tinymce编辑器添加的。在添加描述的同时,我可以插入html标记,并可以为一些div创建样式 但问题是在这里,我需要在显示事件时显示前200个字符。在这里,我不知道如何在不改变设计的情况下显示 事件描述示例如下所示:如何在jQuery或javascript中显示事件描述的前200个字符?,javascript,jquery,html,Javascript,Jquery,Html,我有大约10个evevts,每个事件都包含很长的描述。描述是使用tinymce编辑器添加的。在添加描述的同时,我可以插入html标记,并可以为一些div创建样式 但问题是在这里,我需要在显示事件时显示前200个字符。在这里,我不知道如何在不改变设计的情况下显示 事件描述示例如下所示: <p style="margin: 0.5em 0px; line-height: 22.4px; color: #252525; font-family: sans-serif; font-size: 14
<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"> </span>(commonly referred to as "<strong>Angular</strong>" or "<strong>Angular.js</strong>") is an<span class="Apple-converted-space"> </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"> </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"> </span>mainly maintained by<span class="Apple-converted-space"> </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"> </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"> </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"> </span>of such applications by providing a framework for client-side<span class="Apple-converted-space"> </span><a style="text-decoration: none; color: #0b0080; background: none;" title="Model–view–controller" href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">model–view–controller</a><span class="Apple-converted-space"> </span>(MVC) and<span class="Apple-converted-space"> </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–view–viewmodel</a><span class="Apple-converted-space"> </span>(MVVM) architectures, along with components commonly used in<span class="Apple-converted-space"> </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"> </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"> </span>page, which has embedded into it additional custom<span class="Apple-converted-space"> </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"> </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"> </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"> </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"> </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"> </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"> </span>analytics service<span class="Apple-converted-space"> </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"> </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"> </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"> </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"> </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"> </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>
AngularJS(通常称为“Angular”或“Angular.js”)主要由单个开发人员和公司社区维护,以解决开发过程中遇到的许多挑战。它旨在通过提供客户端(MVC)和(MVVM)架构框架以及中常用的组件,简化此类应用程序的开发和部署
AngularJS库的工作原理是首先读取页面,页面中嵌入了其他自定义属性。Angular将这些属性解释为将页面的输入或输出部分绑定到由标准变量表示的模型的指令。这些JavaScript变量的值可以在代码中手动设置,也可以从静态或动态资源
根据analytics service,AngularJS在2015年7月测试的100万个网站中的、、和大约8400个其他网站上使用
请指导我如何仅显示前200个字符。试试看
<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>
函数myFunction(){
var str='你好,我是digpal singh chauhan;
var-res=str.substring(1,5);
document.getElementById(“demo”).innerHTML=res;
}
问题有点模糊,代码片段不可读,但我会给你一个通用示例
假设您是通过AJAX调用将此事件字符串拉入的-当您收到此字符串时,只需检查它是否超过200个字符,如果超过200个字符,则使用substr
获取字符串的前200个字符
请参见代码片段,但大致如下:
var el = document.getElementById('content');
var longString = '<long string here...>';
if(longString.length > 200) {
el.textContent = longString.substr(0, 200) + '...';
}
需要更多信息…并格式化代码,使其可读。不确定您要实现什么,但您可以使用jquery$(选择器).text()
方法,该方法只返回与选择器
匹配的元素的文本,而不返回任何html。然后您将能够获得前200个字符。