截取含HTML标签的字符串

假设有这样一种需求：后台提取日志（日志是用户使用自己开发的编辑器编写的），在前台需要显示它的摘要。

比较实际的例子就是QZONE新版本首页的摘要，后台提取数据，前台显示摘要<记得曾经被人问起过这个问题>，那就继续折腾了~

 

对于提取摘要，要确定以下几点：

1、以什么为依据提取字符串，字符串的长度还是其它

2、对图片、音频、视频、flash如何处理

 

假设以br作为分隔，最多取4行摘要，超出的部分显示 “...<还有 4132 字>”

最终的效果如下图，左侧为完整的文章，右侧显示的摘要或是示例效果（假设最多显示十行）：

 

 

编辑器是自行开发的，以br作为一行来看，需要实现的功能：

1、最多取出10行数据

2、取出的字符串，图片不能超过100张

 

实现代码：

   1: var cutLine = function(str, lineNum, imgNum) {
      

   2:         var i = 0, 

   3:             j = 0;

   4:  

   5:         var bPos = 0,//记录最近一次检测到br的位置

   6:             iPos = 0,//记录最近一次检测到img的位置

   7:             nPos = 0;//记录下次要开始检测的起始位置

   8:  

   9:         imgNum = imgNum ? imgNum : 100; //最多显示100张图片

  10:         

  11:         while (i < lineNum && (bPos != -1 || iPos != -1)) {
      

  12:             

  13:             //查找换行符的位置

  14:             bPos = str.indexOf(", nPos);        

  15:             if (bPos == -1) {
      

  16:                 bPos = str.indexOf(", nPos);

  17:             }

  18:             

  19:             //查找img IMG的位置

  20:             iPos = str.indexOf(", nPos);

  21:             if (iPos == -1) {
      

  22:                 iPos = str.indexOf(", nPos);

  23:             }

  24:             

  25:             //找到图片则优先计算图片，然后再计算br位置

  26:             if (iPos != -1 && (bPos == -1 || bPos > iPos)) {
      

  27:                 nPos = iPos + 1;

  28:                 

  29:                 if (j++ > imgNum) {
      //图片数超出设定的值

  30:                     break;

  31:                 }

  32:  

  33:             } else {
      

  34:                 nPos = bPos + 1;//从下一个位置开始

  35:             }

  36:  

  37:             i++;

  38:         }

  39:  

  40:         if (nPos === 0) {
      //没有换行符，返回全文

  41:             return str;

  42:         } else {
      

  43:             return str.substr(0, nPos - 1);

  44:         }

  45:         

  46:     };

 

取出来的字符串会面临一个问题：字符串中含有未闭合的标签，直接返回插入到DOM树中，会导致整个页面显示有问题。如何处理，补齐吗？用正则来处理，比较复杂，有没有简单的办法，有。且看代码：

   1: "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: "http://www.w3.org/1999/xhtml">

   3:  

   4:   

   5:   "generator" content="editplus" />

   6:   "author" content="" />

   7:   "keywords" content="" />

   8:   "description" content="" />

   9:  

  10:  

  11:  

  12: 

  20:  

  21: 

 

创建一个DOM元素，然后将字符串扔进去，让浏览器去解析那段可能有不闭合的标签。然后再取出其innerHTML，就得到完整的DOM结构的字符串，正是需要的。

 

整个例子的完整代码：

   1: "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: "http://www.w3.org/1999/xhtml">

   3:  

   4:   

   5:   "generator" content="editplus" />

   6:   "author" content="" />

   7:   "keywords" content="" />

   8:   "description" content="" />

   9:   "content-type" content="text/html;charset=utf-8" />

  10:   

  15:  

  16:  

  17:  

  18:  

  19: 
"">

  20:     
"font-size:14px">1、蓝斯登原则：在你往上爬的时候，一定要保持梯子的整洁，否则你下来时可能会滑倒。
提出者：美国管理学家蓝斯登。
点评：进退有度，才不至进退维谷；宠辱皆忘，方可以宠辱不惊。
2、卢维斯定理：谦虚不是把自己想得很糟，而是完全不想自己。
提出者：美国心理学家卢维斯
点评：如果把自己想得太好，就很容易将别人想得很糟。
3、托利得定理："font-weight:bold">"color:#00ffcc;line-height:1.8em;">测验一个人的智力是否属于上乘，只看脑子里能否同时容纳两种相反的思想，而无碍于其处世行事。
提出者：法国社会心理学家托利得
点评：思可相反，得须相成。
4、刺猬理论：刺猬在天冷时彼此靠拢取暖，但保持一定距离，以免互相刺伤。
点评：保持亲密的重要方法，乃是保持适当的距离。
5、鲦鱼效应："font-weight:bold">"color:#00ff99;line-height:1.8em;">鲦鱼因个体弱小而常常群居，并以强健者为自然首领。将一只稍强的鲦鱼脑后控制行为的部分割除后，此鱼便失去自制力，行动也发生紊乱，但其他鲦鱼却仍像从前一样盲目追随。
提出者：德国动物学家霍斯特
点评：1、下属的悲剧总是领导一手造成的。2、下属觉得最没劲的事，是他们跟着一位最差劲的领导。
6、雷鲍夫法则：在你着手建立合作和信任时要牢记我们语言中：
1、最重要的八个字是：我承认我犯过错误
2、最重要的七个字是：你干了一件好事
3、最重要的六个字是：你的看法如何
4、最重要的五个字是：咱们一起干
5、最重要的四个字是：不妨试试
6、最重要的三个字是：谢谢您
7、最重要的两个字是：咱们
8、最重要的一个字是：您
提出者：美国管理学家雷鲍夫
点评：1、最重要的四个字是：不妨试试；2、最重要的一个字是：您
7、洛伯定理："font-weight:bold">"color:#00ff66;line-height:1.8em;">对于一个经理人来说，最要紧的不是你在场时的情况，而是你不在场时发生了什么。
提出者：美国管理学家洛伯
点评：如果只想让下属听你的，那么当你不在身边时他们就不知道应该听谁的了。

8、斯坦纳定理：在哪里说得愈少，在哪里听到的就愈多。
提出者：美国心理学家斯坦纳
点评：只有很好听取别人的，才能更好说出自己的。
9、费斯诺定理：人两只耳朵却只有一张嘴巴，这意味着人应该多听少讲。
提出者：英国联合航空公司总裁兼总经理费斯诺
点评：说得过多了，说的就会成为做的障碍。
10、牢骚效应："font-weight:bold">"color:#00ff99;line-height:1.8em;">凡是公司中有对工作发牢骚的人，那家公司或老板一定比没有这种人或有这种人而把牢骚埋在肚子里公司要成功得多。
提出者：美国密歇根大学社会研究院
点评：1、牢骚是改变不合理现状的催化剂。2、牢骚虽不总是正确的，但认真对待牢骚却总是正确的。
11、避雷针效应：在高大建筑物顶端安装一个金属棒，用金属线与埋在地下的一块金属板连接起来，利用金属棒的尖端放电，使云层所带的电和地上的电逐渐中和，从而保护建筑物等避免雷击。
点评：善疏则通，能导必安
12、氨基酸组合效应：组成人体蛋白的八种氨基酸，只要有一种含量不足，其他七种就无法合成蛋白质。
点评：当缺一不可时，一就是一切。
13、米格-25效应："font-weight:bold">"color:#00ff99;line-height:1.8em;">前苏联研制的米格-25喷气式战斗机的许多零部件与美国的相比都落后，但因设计者考虑了整体性能，故能在升降、速度、应急反应等方面成为当时世界一流。
点评：所谓最佳整体，乃是个体的最佳组合。
14、磨合效应：新组装的机器，通过一定时期的使用，把磨擦面上的加工痕迹磨光而变得更加密合。
点评：要想达到完整的契合，须双方都做出必要的割舍。
15、波特定理："font-weight:bold">当"color:#00ff66;line-height:1.8em;">遭受许多批评时，下级往往只记住开头的一些，其余就不听了，因为他们忙于思索论据来反驳开头的批评。
提出者：英国行为学家波特
点评：总盯着下属的失误，是一个领导者的最大失误。
16、蓝斯登定律：跟一位朋友一起工作，远较在父亲之下工作有趣得多。
提出者：美国管理学家蓝斯登
点评：可敬不可亲，终难敬；有权没有威，常失权。
17、吉尔伯特法则：工作危机最确凿的信号，是没有人跟你说该怎样作。
提出者：英国人力培训专家吉尔伯特
点评：真正危险的事，是没人跟你谈危险。
18、权威暗示效应："font-weight:bold">一"color:#00ff99;line-height:1.8em;">化学家称，他将测验一瓶臭气的传播速度，他打开瓶盖15秒后，前排学生即举手，称自己闻到臭气，而后排的人则陆续举手，纷纷称自己也已闻到，其实瓶中什么也没有。
点评：迷信则轻信，盲目必盲从。
19、奥尼尔定理：所有的政治都是地方的。
提出者：美国前众议院院长奥尼尔
点评：只有能切身体会到的，群众才认为那是真实的。
20、定位效应：社会心理学家曾作过一个试验：在召集会议时先让人们自由选择位子，之后到室外休息片刻再进入室内入座，如此五至六次，发现大多数人都选择他们第一次坐过的位子。
点评："font-weight:bold">"color:#00ff99;line-height:1.8em;">凡是自己认定的，人们大都不想轻易改变它。
21、艾奇布恩定理：如果你遇见员工而不认得，或忘了他的名字，那你的公司就太大了点。
提出者：英国史蒂芬约瑟剧院导演亚伦艾奇布恩
点评：摊子一旦铺得过大，你就很难把它照顾周全。
22、吉格勒定理：除了生命本身，没有任何才能不需要后天的锻炼。
提出者：美国培训专家吉格吉格勒
点评：水无积无辽阔，人不养不成才。
23、犬獒效应：当年幼的藏犬长出牙齿并能撕咬时，主人就把它们放到一个没有食物和水的封闭环境里让这些幼犬自相撕咬，最后剩下一只活着的犬，这只犬称为獒。据说十只犬才能产生一只獒。
点评：困境是造就强者的学校。
24、近因效应：最近或最后的印象对人的认知有强烈的影响。
提出者：美国社会心理学家洛钦斯。
点评：结果往往会被视为过程的总结。
25、洒井法则：在招工时用尽浑身解数，使出各种方法，不如使自身成为一个好公司，这样人才自然而然会汇集而来。
提出者：日本企业管理顾问酒井正敬。
点评：不能吸引人才，已有的人才也留不住。
26、美即好效应：对一个外表英俊漂亮的人，人们很容易误认为他或她的其他方面也很不错。
提出者：美国心理学家丹尼尔麦克尼尔。
点评：印象一旦以情绪为基础，这一印象常会偏离事实。
27、奥格尔维法则：如果我们每个人都雇用比我们自己都更强的人，我们就能成为巨人公司。
提出者：美国奥格尔维马瑟公司总裁奥格尔维。
点评：如果你所用的人都比你差，那么他们就只能作出比你更差的事情。
28、皮尔卡丹定理：用人上一加一不等于二，搞不好等于零。
提出者：法国著名企业家皮尔卡丹。
点评：组合失当，常失整体优势，安排得宜，才成最佳配置。
29、马蝇效应：再懒惰的马，只要身上有马蝇叮咬，它也会精神抖擞，飞快奔跑。
点评："font-weight:bold">"color:#00ff66;line-height:1.8em;">有正确的刺激，才会有正确的反应。
30、倒u形假说：当一个人处于轻度兴奋时，能把工作作得最好。当一个人一点儿兴奋都没有时，也就没有作好工作的动力了；相应地，当一个人处于极度兴奋时，随之而来的压力可能会使他完不成本该完成的工作。世界网坛名将贝克尔之所以被称为常胜将军，其秘诀之一即是在比赛中自始至终防止过度兴奋，而保持半兴奋状态。所以有人亦将倒u形假说称为贝克尔境界。
提出者：英国心理学家罗伯特耶基斯和多德林。
点评：1、激情过热，激情就会把理智烧光。2、热情中的冷静让人清醒，冷静中的热情使人执着。
31、特伯论断：在数字中找不到安全。
提出者：美国经济学家特伯。
点评：数字是死的，情况是活的。
32、摩斯科定理：你得到的第一个回答，不一定是最好的回答。
提出者：美国管理学家摩斯科。
点评：刨根得根，问底知底。
33、罗杰斯论断：成功的公司不会等待外界的影响来决定自己的命运，而是始终向前看。
提出者：美国IBM公司前总裁罗杰斯。
点评：只想随波逐流，难有理想彼岸。
34、萨盖定律：戴一块手表的人知道准确的时间，戴两块手表的人便不敢确定几点了。
提出者：英国心理学家萨盖。
点评：若选错误参照，必无正确比较。
35、隧道视野效应：一个人若身处隧道，他看到的就只是前后非常狭窄的视野。
点评：1、不拓心路，难开视野。2、视野不宽，脚下的路也会愈走愈窄。
36、巴菲特定律：在其他人都投了资的地方去投资，你是不会发财的。
提出者：美国股神巴菲特。
点评：1、善于走自己的路，才可望走别人没走过的路。2、特色不特，优势无优。
37、古特雷定理："font-weight:bold">"color:#00ff99;line-height:1.8em;">每一处出口都是另一处的入口。
提出者：美国管理学家古特雷。
点评：上一个目标是下一个目标的基础，下一个目标是上一个目标的延续。
38、列文定理：那些犹豫着迟迟不能作出计划的人，通常是因为对自己的能力没有把握。
提出者：法国管理学家列文。
点评：如果没有能力去筹划，就只有时间去后悔了。
39、弗洛斯特法则："font-weight:bold">"color:#00ff99;line-height:1.8em;">在筑墙之前应该知道把什么圈出去，把什么圈进来。
提出者：美国思想家弗洛斯特。
点评：开始就明确了界限，最终就不会作出超越界限的事来。
40、波克定理：只有在争辩中，才可能诞生最好的主意和最好的决定。
提出者：美国庄臣公司总经理詹姆士波克。
点评：无磨擦便无磨合，有争论才有高论。
41、韦奇定理："font-weight:bold">"color:#00ff99;line-height:1.8em;">即使你已有了主见，但如果有十个朋友看法和你相反，你就很难不动摇。
提出者：美国洛杉矶加州大学经济学家伊渥韦奇。
点评：1、未听之时不应有成见，既听之后不可无主见。2、不怕开始众说纷纭，只怕最后莫衷一是。
42、福克兰定律："font-weight:bold">"color:#00ffcc;line-height:1.8em;">没有必要作出决定时，就有必要不作决定。
提出者：法国管理学家福克兰。
点评：当不知如何行动时，最好的行动就是不采取任何行动。
43、王安论断：犹豫不决固然可以免去一些作错事的机会，但也失去了成功的机遇。
提出者：美籍华裔企业家王安博士。
点评：寡断能使好事由好变坏，果断可将危机转危为安。
44、格瑞斯特定理：杰出的策略必须加上杰出的执行才能奏效。
提出者：美国企业家格瑞斯特。
点评：好事干实更好，实事办好愈实。
45、吉德林法则："font-weight:bold">"color:#00ff99;line-height:1.8em;">把难题清清楚楚地写出来，便已经解决了一半。
提出者：美国通用汽车公司管理顾问查尔斯吉德林。
点评：杂乱无章的思维，不可能产生有条有理的行动。
46、沃尔森法则：把信息和情报放在第一位，金钱就会滚滚而来。
提出者：美国企业家沃尔森。
点评：你能得到多少，往往取决于你能知道多少。
47、塔马拉效应：塔马拉是捷克雷达专家弗佩赫发明的一种雷达，它与其他雷达的最大不同是不发射信号而只接收信号，故不会被敌方反雷达装置发现。
点评：善藏者人不可知，能知者人无以藏。
48、小池定理：越是沉醉，就越是抓住眼前的东西不放。
提出者：日本管理学家小池敬。
点评：自我陶醉不易清醒，自以为是不喜批评。
49、赫勒法则：当人们知道自己的工作成绩有人检查的时候会加倍努力。
提出者：英国管理学家赫勒。
点评：只有在相互信任的情况下，监督才会成为动力。
50横山法则：最有效并持续不断的控制不是强制，而是触发个人内在的自发控制。
提出者：日本社会学家横山宁夫。
点评：有自觉性才有积极性，无自决权便无主动权
51、蝴蝶效应：紊乱学研究者称，南半球某地的一只蝴蝶偶尔扇动一下翅膀所引起的微弱气流，几星期后可变成席卷北半球某地的一场龙卷风。他们将这种由一个极小起因，经过一定的时间，在其他因素的参与作用下，发展成极为巨大和复杂后果的现象称为蝴蝶效应。
点评：善终者慎始，谨小者慎微。
52、阿什法则："color:#00ff99;line-height:1.8em;">"font-weight:bold">"color:#00ff99;line-height:1.8em;">承认问题是解决问题的第一步。
提出者：美国企业家阿什。
点评：你愈是躲着问题，问题愈会揪住你不放。
53、洛克忠告："color:#00ff99;line-height:1.8em;">"font-weight:bold">"color:#00ff99;line-height:1.8em;">规定应该少定，一旦定下之后，便得严格遵守。
提出者：英国教育家洛克。
点评：简则易循，严则必行。
54、热炉法则：当人用手去碰烧热的火炉时，就会受到烫的惩罚，其有以下三个特点：即时性、预警性、平等性。
点评：罪与罚能相符，法与治可相期。
55、柯美雅定律："font-weight:bold">"color:#00ffcc;line-height:1.8em;">世上没有十全十美的东西，所以任何东西都有改革的余地。
提出者：美国社会心理学家柯美雅。
点评：不拘于常规，才能激发出创造力。
56、达维多夫定律：没有创新精神的人永远也只能是一个执行者。
提出者：前苏联心理学家达维多夫
点评：只有敢为人先的人，才最有资格成为真正的先驱者。
57、自吃幼崽效应：美国硅谷企业竞争十分激烈，以至于各公司都积极寻找自己的致命弱点，所有公司共同的生存之道是：拿出更好看产品来击败自己的原有产品。有人将这种行为戏称为自吃幼崽。
点评：1、自己不逼自己，别人迟早会逼你。2、敢于对过去告一个段落，才有信心掀开新的一章。
58、舍恩定理：新思想只有落到真正相信它，对它着迷的人手里才能开花结果。
提出者：美国麻省理工学院教授舍恩。
点评：只有信之不疑，才能持之以恒。
59、吉宁定理："font-weight:bold">"color:#00ff33;line-height:1.8em;">真正的错误是害怕犯错误。
提出者：美国管理学家吉宁。
点评：不怕错误的人，错误往往也离他最远。
60、卡贝定理：放弃是创新的钥匙。
提出者：美国电话电报公司前总经理卡贝。
点评：在未学会放弃之前，你将很难懂得什么是争取。
 
本文转载至："http://lazymaru.com/blog/?p=143" target="_blank">http://lazymaru.com/blog/?p=143

  21: 

  22:  

  23: 
"blog_container">正在加载...

  24:  

  25: 

  95:  

  96: 

 

也可以自己去实现一个关闭HTML标签的函数，下面这段实现代码过于理想化，不健壮，得到的结果不符合预期。

如果字符串的顺序刚好一致倒没问题，如果像这样子：

aaabbbcccdddfff

得以的将是：

aaabbbcccdddfff

 

但思路可以参考一下，代码如下：

   1:  

   2:     var closeHTML = function(str) {
      

   3:         var arrTags = ["a", "div", "span", "table", "font", "b", "u", "i", "center", "marquee"];

   4:         

   5:         var reg1,

   6:             reg2,

   7:             openTags,

   8:             closeTags,

   9:             openTagLength,

  10:             closeTagLength,

  11:             arrFixHTML;

  12:             

  13:         for (var i = 0, len = arrTags.length; i < len; i++) {
      

  14:             reg1 = new RegExp("<" + arrTags[i] + "( [^<>]+|)>", "ig");

  15:             reg2 = new RegExp(" + arrTags[i] + ">", "ig");

  16:  

  17:             openTags = str.match(reg1);

  18:             closeTags = str.match(reg2);

  19:             openTagLength = openTags ? openTags.length : 0;

  20:             closeTagLength = closeTags ? closeTags.length : 0;

  21:             arrFixHTML = [];

  22:  

  23:             for (var j = 0, jLen = openTagLength - closeTagLength; j < jLen; j++) {
      

  24:                 arrFixHTML.push(" + arrTags[i] + ">");

  25:             }

  26:  

  27:             str += arrFixHTML.join("");

  28:         }

  29:  

  30:         return str;

  31:     }

 

我也在google搜索，在javaeye找到一篇相关的帖子<这个是截取长度>，链接>>

它的实现代码也可以参考一下：

   1: "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: "http://www.w3.org/1999/xhtml">

   3: 

   4: "Content-Type" content="text/html; charset=utf-8" />

   5: 

   6: 

   7: 

   8: 

  91: 

  92: 

 

 

上面的一些工作还是比较简单的，剩下其实还有一些问题要处理：

1、摘要内的图片尺寸过大

2、视频、音频、flash的替换处理，点击后要播放、查看

3、图站图片的链接过滤处理

…

 

如果后台好处理就不用前台JavaScript这么折腾了~

转载于:https://www.cnblogs.com/meteoric_cry/archive/2011/03/10/1979284.html