必威体育下载克里斯蒂安·海尔曼

贴上“大纲”标签的帖子

目录脚本——我的宿敌

星期三,1月6日,二千零一十

有一件事我很喜欢——让我重新表述一下——我非常喜欢微软Word,那就是你可以从一个文档中生成一个目录。Word将遍历标题并创建一个嵌套总有机碳从他们那里为你:

向Word文档添加目录

Microsoft Word生成的目录。

现在,我总是喜欢为我写的文件做这件事HTML,请同样,但是用手维护它们是一种痛苦。我通常先写我的文件大纲:


              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “紧身衣”
              >
             紧身衣>

              
              身份证件=
              “猎犬”
              >
             检索器>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              “沙鼠”
              >
             沙鼠>

              
              身份证件=
              “小鸭子”
              >
             小鸭>

互联网上可爱的东西

兔子

小狗

拉布拉多犬

阿尔萨斯人

紧身衣

检索器

小猫

沙鼠

小鸭

然后我收集那些,复制并粘贴它们,然后使用搜索和替换来打开n要将链接和ID链接到片段标识符,请执行以下操作:


             
              >
             
             
             HREF=
             “可爱”
             >
            互联网上可爱的东西>>

             
              >
             
             
             HREF=
             “兔子”
             >
            兔子>>

             
              >
             
             
             HREF=
             “小狗”
             >
            小狗>>

             
              >
             
             
             HREF=
             “γ实验室”
             >
            拉布拉多犬>>

             
              >
             
             
             HREF=
             “阿尔萨斯”
             >
            阿尔萨斯人>>

             
              >
             
             
             HREF=
             “紧身衣”
             >
            紧身衣>>

             
              >
             
             
             HREF=
             “猎犬”
             >
            检索器>>

             
              >
             
             
             HREF=
             “小猫”
             >
            小猫>>

             
              >
             
             
             HREF=
             “沙鼠”
             >
            沙鼠>>

             
              >
             
             
             HREF=
             “鸭子”
             >
            小鸭>>
              
              身份证件=
              “可爱”
              >
             互联网上可爱的东西>

              
              身份证件=
              “兔子”
              >
             兔子>

              
              身份证件=
              “小狗”
              >
             小狗>

              
              身份证件=
              “实验室”
              >
             拉布拉多犬>

              
              身份证件=
              “阿尔萨斯人”
              >
             阿尔萨斯人>

              
              身份证件=
              “紧身衣”
              >
             紧身衣>

              
              身份证件=
              “猎犬”
              >
             检索器>

              
              身份证件=
              “小猫”
              >
             小猫>

              
              身份证件=
              “沙鼠”
              >
             沙鼠>

              
              身份证件=
              “小鸭子”
              >
             小鸭>
  • 互联网上可爱的东西
  • 兔子
  • 小狗
  • 拉布拉多犬
  • 阿尔萨斯人
  • 紧身衣
  • 检索器
  • 小猫
  • 沙鼠
  • 小鸭
  • 互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    检索器

    小猫

    沙鼠

    小鸭

    然后我需要查看标题的重量和顺序,并添加总有机碳相应地列出。

    
                 
                  >
                 
      
                 
                  >
                 
                 
                 HREF=
                 “可爱”
                 >
                互联网上可爱的东西>
        
                 
                  >
                 
          
                 
                  >
                 
                 
                 HREF=
                 “兔子”
                 >
                兔子>>
          
                 
                  >
                 
                 
                 HREF=
                 “小狗”
                 >
                小狗>
            
                 
                  >
                 
              
                 
                  >
                 
                 
                 HREF=
                 “γ实验室”
                 >
                拉布拉多犬>>
              
                 
                  >
                 
                 
                 HREF=
                 “阿尔萨斯”
                 >
                阿尔萨斯人>>
              
                 
                  >
                 
                 
                 HREF=
                 “紧身衣”
                 >
                紧身衣>>
              
                 
                  >
                 
                 
                 HREF=
                 “猎犬”
                 >
                检索器>>
            >
          >
          
                 
                  >
                 
                 
                 HREF=
                 “小猫”
                 >
                小猫>>
          
                 
                  >
                 
                 
                 HREF=
                 “沙鼠”
                 >
                沙鼠>>
          
                 
                  >
                 
                 
                 HREF=
                 “鸭子”
                 >
                小鸭>>
        >
      >
    >
                  
                  身份证件=
                  “可爱”
                  >
                 互联网上可爱的东西>
    
                  
                  身份证件=
                  “兔子”
                  >
                 兔子>
    
                  
                  身份证件=
                  “小狗”
                  >
                 小狗>
    
                  
                  身份证件=
                  “实验室”
                  >
                 拉布拉多犬>
    
                  
                  身份证件=
                  “阿尔萨斯人”
                  >
                 阿尔萨斯人>
    
                  
                  身份证件=
                  “紧身衣”
                  >
                 紧身衣>
    
                  
                  身份证件=
                  “猎犬”
                  >
                 检索器>
    
                  
                  身份证件=
                  “小猫”
                  >
                 小猫>
    
                  
                  身份证件=
                  “沙鼠”
                  >
                 沙鼠>
    
                  
                  身份证件=
                  “小鸭子”
                  >
                 小鸭>

    互联网上可爱的东西

    兔子

    小狗

    拉布拉多犬

    阿尔萨斯人

    紧身衣

    检索器

    小猫

    沙鼠

    小鸭

    现在,自动为我做这件事不是很好吗?在javascript和国内事实上,这是一个比乍一看更棘手的问题国内脚本编写研讨会)。

    以下是一些需要考虑的问题:

    • 你可以很容易地得到元素GetElementsByTagname()。但你不能GetElementsByTagname('h*')可悲的是。
    • 标题XHTMLHTML 4没有它们作为子元素应用到的元素(xhtml l2建议HTML5在某种程度上-布鲁斯·劳森写了一篇关于这个的好文章betway体育官方网还有一个漂亮俏皮HTML5大纲视图可用)。
    • 你可以做一个GetElementsByTagname()。对于每个标题级别,然后连接所有标题级别的集合。然而,这并没有给你他们在文件来源上的顺序。
    • 为此目的PPK写了一个臭名昭著的总有机碳脚本很久以前在他的网站上用过GetElementsByTagnames()。不是每个浏览器都支持的功能。因此,它也不太适合这项工作。他也在大会上“作弊”总有机碳当他添加类以直观地缩进它们而不是真正嵌套列表时,请列出。
    • 对于所有使用国内是痛苦的:做一个GetElementsByTagname(“*”)走完全程国内树,比较节点名以这种方式获取标题。
    • 我想到的另一个解决方案是内层HTML然后使用正则表达式匹配标题。
    • 由于您不能假定每个标题都有一个ID,因此如果需要,我们需要添加一个ID。

    所以这里有一些解决这个问题的方法:

    使用国内以下内容:

    功能(见表1)_
      var标题= []
      var热休克蛋白= /H/D/I
      var计数= 0
      var榆树=文件。GetElementsByTagname“*”(见表1)
      对于var=0,请J=榆树。长度<J++(见表1)_
        var库尔=榆树[]
        var身份证件=库尔身份证件
        如果herxp.测试库尔节点名(见表1)(见表1)_
          如果库尔身份证件=''(见表1)_身份证件= “头”+计数库尔身份证件 =身份证件计数++;
          _标题。库尔(见表1)
        _
      _
      var外面的= 
      对于 = 0 ,请J =标题。 长度 <J ++ (见表1) _ var重量 =标题 []. 节点名. 子字符串 ,请 (见表1) 如果 重量 >老重量 (见表1) _外面的 += _ 如果 重量 =下一个八 (见表1) _外面的 += ’’ _ _ var老重量 =重量 _外面的 +=
    文件。GETeleMyByID'目录'(见表1).内层HTML =外面的 _(见表1)(见表1)
      ;出+='
    • '+标题[i].innerhtml+';if(标题[i+1])var nextweight=标题[i+1].nodename.substr(1,1);if(重量>下一个重量)out+='
    ;如果(重量==nextweight)out+=';var oldweight=重量;}++=;document.getElementByID('toc').innerHTML=out;)();

    你可以查看国内解决方案在这里起作用.它的问题是,在大型文档和Msie6.

    正则表达式解

    围绕着穿越整个世界的需要国内,请我认为在内层HTML国内一旦我添加了ID并组装了总有机碳以下内容:

    功能(见表1)_
      varBD=文件。身体,请X=屋宇署内层HTML,请标题=十.比赛/
                
                 ]*>[\s\s]*?<\/h\d>美元/mg
                (见表1),请R1= />,请R2= /<(\/)?H(\d)/G,请TOC=文件。创建元素'分区'(见表1),请外面的= 
      ,请= 0 ,请J =标题。 长度 ,请库尔 = '' ,请重量 = 0 ,请下一个八 = 0 ,请老重量 = ,请容器 =BD 对于 = 0 <J ++ (见表1) _ 如果 标题 []. 索引 'id=' (见表1) ==- (见表1) _库尔 =标题 []. 代替 R1 ,请 “ID”=“H” ++ “>” (见表1) X =十. 代替 标题 [] ,请库尔 (见表1) _ 其他的 _库尔 =标题 [] _重量 =库尔 子字符串 ,请 (见表1) 如果 <J - (见表1) _下一个八 =标题 [+ ]. 子字符串 ,请 (见表1) _ var=库尔 代替 R2 ,请 '<1美元' (见表1) =a. 代替 “ID=” ,请 'HRFF=“γ” (见表1) 如果 重量 >老重量 (见表1) _外面的 +=
        _外面的 +=
      • + 如果下一个八<重量(见表1)_外面的+=
      _ 如果 下一个八 =重量 (见表1) _外面的 += ’’ _老重量 =重量 _屋宇署 内层HTML =X TOC。 内层HTML =外面的 +
    容器=文件。GETeleMyByID'目录'(见表1) _BD容器。附属儿童TOC(见表1) _(见表1)(见表1)
      ',i=0,j=标题长度,cur='',重量=0,n权值=0,旧重量=2,容器=BD;(I=0;I) ');x=x.替换(标题[i],cur);其他cur=标题[i];重量=电流子串(2,1);如果(i) oldweight)out+='
        ;出+='
      • '+A;如果(下八个
      ;container=document.getElementByID('toc')bd;container.appendchild(toc);)();

    你可以请参阅此处的正则表达式解决方案.问题在于阅读内层HTML然后写出来可能会很昂贵(这需要测试),如果你将事件处理附加到元素上,它可能会泄漏内存,正如我的同事Matt Jones指出的(再一次,这需要测试)。阿拉佩利瓦维还提到两种方法的混合可能更好——匹配标题,但不要写回innerhtml——而是使用国内添加IDS。

    图书馆救援-A尤伊3例子

    与另一位同事交谈-DAV玻璃-关于总有机碳问题他指出尤伊3选择器引擎愉快地获取一个元素列表,并以正确的顺序返回它们。这使得事情变得非常简单:

    <脚本类型=“文本/javascript”SRC公司=“http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js”>
                脚本>
    <脚本>尤伊_结合以下内容: ,请超时以下内容: 10000_(见表1).使用“节点”,请 功能(见表1) _
      var结点=是的。全部的'h1、h2、h3、h4、h5、h6'(见表1)
      var外面的= 
      var重量 = 0 ,请下一个八 = 0 ,请老重量 节点。 每个 功能 o ,请K (见表1) _ var身份证件 =O. 得到 'ID' (见表1) 如果 身份证件 = '' (见表1) _身份证件 = “头” +K O. 设置 'ID' ,请身份证件 (见表1) _ 重量 =O. 得到 “NoNeNess” (见表1). 子字符串 ,请 (见表1) 如果 重量 >老重量 (见表1) _外面的 += _ 如果 重量 =下一个八 (见表1) _外面的 += ’’ _ _老重量 =重量 _ (见表1) 外面的 +=
    是的。“toc”(见表1).设置'内HTML',请外面的(见表1) _(见表1)脚本>

    可能有一种更清洁的方法来组装总有机碳名单。

    性能注意事项

    生活不仅仅是提高速度。–甘地

    上面的一些代码可能非常慢。这就是说,每当我们谈论性能和javascript时,重要的是要考虑实现的上下文:目录脚本通常用于重文本,但很简单,文件。测量和判断这些脚本在Gmail或雅虎主页上运行是没有意义的。这就是说,更快、更少的内存消耗总是更好的,但是我总是对考虑边缘情况的性能测试有点怀疑,而不是解决方案要应用到的情况。

    移动服务器端。

    另一件事,我越来越怀疑是客户端解决方案的事情,实际上也有意义的服务器。因此,我认为我可以使用上面的正则表达式方法并将其移到服务器端。

    第一个版本是PHP脚本可以循环HTML记录通过。你可以在这里查看tocit.php的结果以下内容:

    
                
    $文件 = $GET[“文件”]
    如果普雷格匹配'/^[A-Z0-9 \-\.]+$/i',请$文件(见表1)(见表1)_
    $内容 = 文件获取目录$文件(见表1)
    普雷格尔马奇亚尔“/
                 
                  *> *</H.> /US
                 ,请$内容,请头条新闻(见表1)
    美元 = 
      前臂 头条新闻 [ 0 ] 作为 美元 => H美元 (见表1) _ 如果 字符串查找 H美元 ,请 'ID' (见表1) = (见表1) _ X美元 = 更换 '/>/' ,请 'id=“头部” . 美元 . “>” ,请 H美元 ,请 (见表1) $内容 = str_替换 H美元 ,请 X美元 ,请 $内容 (见表1) H美元 = X美元 _ $Link = 更换 '/<(\/)?高\d/' ,请 '<1美元' ,请 H美元 (见表1) $Link = str_替换 “ID=” ,请 'HRFF=“γ” ,请 $Link (见表1) 如果 美元 > 0 头条新闻 [ ] [ 美元 - ] < 头条新闻 [ ] [ 美元 ] (见表1) _ 美元 .=
        _ 美元 .=
      • .$Link.'' 如果头条新闻[][美元+] 头条新闻[][美元+]<头条新闻[][美元](见表1)_ 美元.=
      _ 如果 头条新闻 [ ] [ 美元 + ] 头条新闻 [ ] [ 美元 + ] = 头条新闻 [ ] [ 美元 ] (见表1) _ 美元 .= ’’ _ _ 美元 .=
    回声 str_替换
    ,请美元,请$内容(见表1) _其他的_ 死亡'请只保存像text.html这样的文件!'(见表1) _ 是吗?>
      ';foreach($headlines[0]as$k=>$h)if(strstrstr($h,'id')==false)$x=preg replace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$H=X美元;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;$out.='
      • “$link.”;如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;如果($headlines[1][$k+1]&&$headlines[1][$k+1]==$headlines[1][$k])$out.=';$out.='
    ';echo str_replace('
    ',$out,$content);else die('only files like text.html please!')}?>

    这很好,但是没有另一个文件循环,我们也可以使用的输出缓冲区PHP以下内容:

    
                
    功能托基特$内容(见表1)_
      普雷格尔马奇亚尔“/
                 
                  *> *</H.> /US
                 ,请$内容,请头条新闻(见表1)
      美元 = 
      前臂 头条新闻 [ 0 ] 作为 美元 => H美元 (见表1) _ 如果 字符串查找 H美元 ,请 'ID' (见表1) = (见表1) _ X美元 = 更换 '/>/' ,请 'id=“头部” . 美元 . “>” ,请 H美元 ,请 (见表1) $内容 = str_替换 H美元 ,请 X美元 ,请 $内容 (见表1) H美元 = X美元 _ $Link = 更换 '/<(\/)?高\d/' ,请 '<1美元' ,请 H美元 (见表1) $Link = str_替换 “ID=” ,请 'HRFF=“γ” ,请 $Link (见表1) 如果 美元 > 0 头条新闻 [ ] [ 美元 - ] < 头条新闻 [ ] [ 美元 ] (见表1) _ 美元 .=
        _ 美元 .=
      • .$Link.'' 如果头条新闻[][美元+] 头条新闻[][美元+]<头条新闻[][美元](见表1)_ 美元.=
      _ 如果 头条新闻 [ ] [ 美元 + ] 头条新闻 [ ] [ 美元 + ] = 头条新闻 [ ] [ 美元 ] (见表1) _ 美元 .= ’’ _ _ 美元 .=
    返回 str_替换
    ,请美元,请$内容(见表1) _ 开始“托基特”(见表1) 是吗?>…文件…] 奥本登齐(见表1)是吗?>
      ;foreach($headlines[0]为$k=>$h)if(strstr($h,'id')==false)$x=pregreplace('/>/','id=“head.$k.”“>”,$h,1);$content=str_替换($h,$x,$content);$H=X美元;};$link=preg_replace('/<(\/)?h\d/','<$1a',$h);$link=str_replace('id=“”,'href=“”,$link);如果($k>0&$headlines[1][$k-1]<$headlines[1][$k])$out.='
        ;$out.='
      • “$link.”;如果($headlines[1][$k+1]&&$headlines[1][$k+1]<$headlines[1][$k])$out.='
      ;如果($headlines[1][$k+1]&&$headlines[1][$k+1]==$headlines[1][$k])$out.=';$out.='
    ;返回str_replace('
    ',$out,$content);ob_start(“tocit”);?>…文件…]

    服务器端解决方案有一些好处:它们总是有效的,如果需要,您还可以缓存一段时间的结果。我确信PHP可以加快速度,不过。

    查看所有解决方案并获取源代码

    我给你看了我的,现在给我看看你的!

    所有这些解决方案都非常粗糙和现成。你认为如何改进它们?为不同的库做一个版本怎么样?前进,在Github上分叉项目,告诉我你能做什么。