javascript 文章截取部分无损html显示实现代码

因为是html格式的内容，直接截取内容的前多少字符显然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果，再网上搜了一通之后，写下如下代码应该可以满足基本的要求了。(js写的，因为容易调试)


代码如下:

var br = {};
br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/
br.contain = function(arr,it){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]==it){
return true;
}
}
return false;
}
br.subArtc = function(article,worldNum){
var result = [];
/*首先截取需要的字串*/
var wcount = 0;
var startTags = [],endTags = [];
var isInTag = false;
for(var i=0,len=article.length;i<len;i++){
var w = article[i];
result.push(w);
if(w=="<"){
isInTag = true;
}
if(!isInTag){
wcount++;
if(wcount==worldNum){
break;
}
}
if(w==">"){
isInTag = false;
}
}
/*对字串进行处理*/
var j=0;
isInTag = false;
var isStartTag = true;
var tagTemp = "";
while(j<i){
w = result[j];
if(isInTag){
if(w==">" || w==" " || w=="/"){
isInTag = false;
if(isStartTag){
startTags.push(tagTemp);
}else{
endTags.push(tagTemp);
}
tagTemp = "";
}
if(isInTag){
tagTemp+=w;
}
}
if(w=="<"){
isInTag = true;
if(result[j+1]=="/"){
isStartTag = false;
j++;
}else{
isStartTag = true;
}
}
j++;
}
/*剔除img,br等不需要成对出现的标记*/
var newStartTags = [];
for(var x=0,len=startTags.length;x<len;x++){
if(!br.contain(br.spTags,startTags[x])){
newStartTags.push(startTags[x]);
}
}
/*添加没有的结束标记*/
var unEndTagsCount = newStartTags.length - endTags.length;
while(unEndTagsCount>0){
result.push("<");
result.push("/")
result.push(newStartTags[unEndTagsCount-1]);
result.push(">");
unEndTagsCount--;
}
return result.join("");
};

基本思路：

1.绕过标记，取得实际内容字数 ，如需要显示内容前100个字，绕过标记检索，得到第一百个字实际的索引。然后截取此索引前面的字串。

2.根据一得到的字串，得到这个字串中存在的开始标记和结束标记。注：此处的开始标记标识以"<"开通，且下一个字符不为"/"。

3.剔除2中 得到的开始标记中的不需要成对出现的标记。如br,img,hr等。

4.对比经过3处理的开始标记和2中得到的结束标记，没有配成对的在合适的位置为其配对。

此功能没有经过严格的测试，大家若有兴趣可以可以帮忙测试，有更好的想法的也可以回帖讨论。

作者：cnblogs bravfing

赞 (0)

相关推荐

  • js截取函数(indexOf,join等)

    函数:indexOf() 功能:返回字符串中匹配子串的第一个字符的下标 复制代码 代码如下: var myString="JavaScript"; var w=myString.indexOf("v");w will be 2 var x=myString.indexOf("S");x will be 4 var y=myString.indexOf("Script");y will also be 4 var z=myStr

  • js prototype截取字符串函数

    prototype它是用Javascript写好的一些API,包括对Javascript中的类如String,Array等进行的扩充,把JS文件嵌入后直接用就行了. 复制代码 代码如下: String.prototype.strLen = function() { var len = 0; for (var i = 0; i < this.length; i++) { if (this.charCodeAt(i) > 255 || this.charCodeAt(i) < 0) len

  • 用javascript实现截取字符串包含中文处理的函数

    1.substring 方法 定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数 描述 start 必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop 可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. 返回值 一个新的字符串,该字符串值包

  • JS 截取字符串substr 和 substring方法的区别

    substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数 stringvar 必选项.要提取子字符串的字符串文字或 String 对象. start 必选项.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选项.在返回的子字符串中应包括的字符个数. 说明 如果 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串将延续到 stringvar 的最后. 示

  • Javascript 获取链接(url)参数的方法[正则与截取字符串]

    当然,我们也可以用正则直接匹配,文章中也给出了一个正则的例子. 分解链接的方式: 复制代码 代码如下: <script type="text/javascript"> <!-- // 说明:Javascript 获取链接(url)参数的方法 function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.indexOf("?")==-1 || l

  • JavaScript利用split函数按规定截取字符串(获取邮箱用户名)

    一个JavaScript基础技巧,根据一串字串中规定的字符,获取该字符以左或以右的字符串,以本例中的电子邮箱为例,它可以获取邮箱的用户名,而将用户名以外的字符抛弃掉,本实例应该是比较实用的. JavaScript截取字符串 function x(){ var x=document.getElementById("x").value.toString(); var c=x.split("@"); document.getElementById("x"

  • javascript 文章截取部分无损html显示实现代码

    因为是html格式的内容,直接截取内容的前多少字符显然不合适了.而如果直接去掉所有html格式然后再截取又无法达到想要的效果,再网上搜了一通之后,写下如下代码应该可以满足基本的要求了.(js写的,因为容易调试) 复制代码 代码如下: var br = {}; br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/ br.contain = function(arr,it){ for(var i=0,len=arr

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • javascript实现页面的实时时钟显示示例

    javascript实现页面的实时时钟显示示例

    时钟实现 实现这个时钟时间需要解决以下三个问题: 获得当前时间,并格式化 如何可以在页面中显示时间 让时间动起来 1.获得当前时间,并格式化 要获得当前时间,可以使用JavaSctipt的Date对象,默认构造函数会返回当前时间.存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数. setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和日期值 实现代码如下: function getnow(){ //1.获得当前时间,格式化时间 var now=n

  • 引入JavaScript时alert弹出框显示中文乱码问题

    引入JavaScript时alert弹出框显示中文乱码问题

    今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码. 经查有两种可能: 1.JavaScript与HTML文件编码方式不一样 办法:在引入JavaScript的代码中指定其字符集为gb2312,代码如下: <script charset="gb2312" type="text/javascript" language="javascript" src="javascript.js"&

  • JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

    本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法.分享给大家供大家参考.具体如下: html代码: <form name="searchform" id="search-form"> <div> <b>Search</b> <input type="text" name="txtInput" title="Enter the t

  • asp.net 文章内容分页显示的代码

    aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ArticlePage.aspx.cs" Inherits="ArticlePage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

  • ThinkPHP的截取字符串函数无法显示省略号的解决方法

    对于ThinkPHP的截取字符串函数无法显示省略号的情况,解决方法如下: 打开Common/extend.php页面,修改msubstr函数如下: function msubstr($str, $start=0, $length, $charset="utf-8", $suffix=true) { if(function_exists("mb_substr")) { if($suffix) { if($str==mb_substr($str, $start, $le

  • JavaScript使表单中的内容显示在屏幕上的方法

    本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法.分享给大家供大家参考.具体实现方法如下: 一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getEl

  • JavaScript控制table某列不显示的方法

    本文实例讲述了JavaScript控制table某列不显示的方法.分享给大家供大家参考.具体实现方法如下: 1.table代码 复制代码 代码如下: <table id="mytable" border="0" width="1400" align="center"    cellpadding="3" cellspacing="1" bgcolor="#dfdfdf&q

  • Javascript实现通过选择周数显示开始日和结束日的实现代码

    最近在一个项目中遇到一个查询页面,其中一个查询条件是根据选择的年份.月以及周数显示选择的该周从几号到几号,这样一个需求.在网上搜索了一下,有类似的但是没有完全一样的,只好自己动手.思路是首先取得所选择的该年月1号这一天是星期几,然后算出这一周中周一的日期. 以此为基点,第1周的结束日即为这一天加6,第2周的开始日为这一天加7,结束日为这一天加13,以此类推,直到推算出第5周的开始日和结束日. 具体代码如下: //该方法有两个参数,date是给定的日期型参数,days是需要在该日期进行加减的天数.

随机推荐