自动生成目录和标题编号

分享于 

50分钟阅读

Web开发

  繁體

目录

符号 Table of Contents 将读者返回到内容的顶部。

抽象 Table of Contents

本文介绍了一个HTML编写工具,自动生成器,它生成一个HTML文档的内容 table。 工具还可以对HTML标题进行编号。

目的Table of Contents

自动 <生成器工具根据名为"目录 div"的div>的内容对源HTML文档执行修改。 有三种不同的操作模式: 生成。删除和编号。

生成 模式,工具

  • 生成 table 文档中出现的 HTML <>的内容( 目录)的内容 [^ ]>。
  • 允许指定要包含在目录中的标记。
  • 允许指定的标记为非连续( 比如 ,"h2,h3,h5"将在级别 2.3。5 - 跳过h4生成一个内容的table 内容)。
  • 允许指定目录标题的目录和HTML标题级别的标题。
  • 允许指定是否链接到TOC的链接。 如果需要返回链接,允许指定要放置在链接中的图像。
  • 目录将放置在目录div所在的HTML文档中。

删除 模式,工具

  • 从HTML文档中删除由 auto toc生成器以前生成的所有 HTML。
  • 从HTML文档中移除 toc div元素。

编号 模式,工具执行与生成模式相同的操作,但另外还生成标题编号。

目录div元素 Table of Contents

TOC div元素控制TOC所需的内容,以及TOC在HTML文档中的位置。 toc div元素在生成和编号模式中是有效的。

在最简单的形式中,toc div元素采用以下形式:


<div class="toc"></div>




生成的TOC将放置在放置 TOC div元素的HTML文档中。 生成的TOC替换了 TOC-div元素。

"目录"类的选择是有意的。 使用这个类,可以在CSS中指定与TOC关联的样式。 在CSS没有定义这类类的情况下,下面可以放置在HTML文档的<头> 中。


<style type="text/css">


. toc


 {


 }


. toc-generated


 {


 }


</style>




"生成的目录"类被讨论为 below。 注意,不需要为 auto toc生成器定义类来执行。

修改BNF中的目录div元素的格式是:





TOC-div ::= <div class="toc" 


 [style="[toc-headers[:<heading-tags-list>];]


 [toc-return[:<return-desired>];]


 [toc-title[:<title-of-toc>];]


 [toc-image[:<path-to-image>];]


 [toc-image-width[:<width-height>[px]];]


 [toc-image-height[:<width-height>[px]];]


 [toc-header-level[:<heading-tag>];]


 [toc-numbering[:<level-list>];]"


 </div>. 



<heading-tags-list> ::= <heading-tag> 


 ::= <heading-tag>,<heading-tags-list>. 



<heading-tag> ::= h2


 ::= h3


 ::= h4


 ::= h5


 ::= h6. 



<return-desired> ::= true


 ::= false. 



<title-of-toc> ::= alphanumeric and special characters string. 



<path-to-image> ::= path to a return link image. 



<width-height> ::= <digit> 


 ::= <width-height><digit>. 



<digit> ::= 0


 ::= 1


 ::= 2


 ::= 3


 ::= 4


 ::= 5


 ::= 6


 ::= 7


 ::= 8


 ::= 9. 



<level-list> ::= <level>


 ::= <level>,<level-list>. 



<level> ::= [<heading-tag>]digit. 



目录div属性 Table of Contents

toc div的两个属性是"类"和"样式"。

Table of Contents

类属性是必需的,并且必须具有"目录"的属性值。 虽然属性值不区分大小写,但该值应该是 lowercase ( 如W3C推荐的)。

样式 Table of Contents

样式属性是可选的,并且包含它的属性所需内容的规范。 如果省略属性,将使用以下缺省目录 div:





<div class="toc"


 style="toc-headers:h2,h3,h4,h5,h6;


 toc-return:true;


 toc-title=Table of Contents;


 toc-image:/app_themes/codeproject/img/gototop16.png;


 toc-image-width:16px;


 toc-image-height:16px;


 toc-header-level:h2;"


</div>




请注意,属性名称由冒号(":") 和分号("分隔,并且") 将属性分隔开来。 当提供多个属性值时,它们用逗号("(") ) 彼此分隔。

toc div样式属性 Table of Contents

toc div样式属性控制由自动toc生成器生成的内容。 如 上面 所示,可以省略样式属性及其属性。 但是,通过使用样式属性,可以对TOC的内容进行重要的控制。

目录标头 Table of Contents

TOC标题属性指定哪些HTML标题标记将在目录中生成条目。 请注意,auto toc生成器不处理 HTML <h1> 标签。

,属性可以省略,如果省略了所有HTML标题标签的条目,将放在HTML文档中。 同样,如果存在,属性,但省略了 heading-tags-list,则在HTML文档中显示所有HTML标题标记的条目。

heading-tags-list由一个或者多个"h2"。"h3"。"h4"。"h5"或者"n。h6"组成,任何顺序都以逗号分隔,以逗号分隔。 忽略heading-tags-list中的white-space。 空的heading-tags-list被视为省略了 heading-tags-list,并且所有HTML标题标签的条目都会放在HTML文档中。 忽略heading-tags-list中的无法识别或者重复的值。

heading-tags-list的一个例子是"h3,H5,h 2,foo,h4bar,h8,h2"。 对于本例,将为HTML标题标记 <h2>。<h3>和 <h5>生成TOC条目。 "","h4bar"还有"h8将被忽略。 条目" 2"将被修改为"h2",并且重复的"h2"将被忽略。 条目"h5"将被修改为"h5"。 即使heading-tags-list中的条目是无序的,目录条目也会被排序。

在HTML标题处理过程中,将保留HTML文本格式标记。 这些包括:

标签描述
<b>粗体文本
<del>删除的文本
<em>强调文本
<i>斜体文本
<ins>插入的文本
<标记>标记/突出显示的文本
<小>较小的文本
<强>重要文本
sub <>Subscripted文本
<支持>Superscripted文本

为了更加全面地理解 auto toc生成过程,需要定义本文中使用的一些基本术语。

Element Definition

HTML元素被认为是在它的标记的开始"<"处开始的,被认为是在结束标记的结束">"处结束。

在开始标记之后,HTML元素的内容会立即开始,并在结束标记的结束标记之前立即结束。

在 <h的初始处理过程中? > 和 <div> 元素,auto toc生成器使用类"生成的目录"删除以前生成的所有元素。 例如如果前面的示例 header 已经处理过,它可能具有以下形式。

Expanded Element

"toc_bookmark_1"书签是这里标题的目录中条目的目标。 "生成的目录"类是对自动toc生成器的信号,该元素在任何删除过程中都将被移除。

第二个 <中的href (> 元素) 指向目录。 由于用户没有指定 toc-return-image,所以 <> 元素存在,因此使用了默认值。 同样,"生成的目录"类是删除这里元素的信号。

完成所有初始处理后,标题元素将显示为:


<h2>Header Level <b>2</b> - <i>Number 1</i></h2>




toc返回 Table of Contents

dbo return属性指定是否将指向directory的返回链接放置在HTML标题标记的内容中。 这样的返回链接允许读者从文档中的位置返回到目录。 可以识别的属性值是"true"和"false"。

如果不存在,属性,但是属性值不是,或者提供了,属性,将返回"toc_return_to_toc"标题的内容。

目录标题 Table of Contents

TOC标题属性指定目录的标题。 如果缺少TOC标题属性,标题"目录"将前缀为。

属性的值可以包含任何字母数字字符加上以下任何字符:


Tilde (~)


Exclamation mark (!)


Number sign (#)


Dollar sign ($)


Percent sign (%)


Circumflex accent (^)


Ampersand (&)


Asterisk (*)


Left parenthesis (()


Right parenthesis ())


Underscore (_)


Plus sign (+)


Grave accent (`)


Hyphen (-)


Equals sign (=)


Left bracket ([)


Right bracket (])


Vertical line (|)


Semicolon (;)


Colon (:)


Greater-than symbol (>)


Question mark(?)


Comma (,)


Period (.)


Space ( )




任何其他字符将从目录标题中删除。 如果在处理后出现空字符串结果,则不会生成任何目录标题。

toc映像 Table of Contents

of属性指定将放置在HTML标题标记内容的directory的返回链接中的图像路径。 如果缺少toc图像属性或者toc图像属性值,则路径





"/app_themes/codeproject/img/gototop16.png"




将被插入到HTML标题标签中。 属性的值可以包含任何有效的路径字符。 未进行任何测试以确保提供有效路径。

默认路径是专门为代码项目项目定义的。 生成directory的文档,但不会在代码项目中发布,应具有指定的directory图像。 图像路径必须是"可见"到HTML文档。 请参见汽车目录生成器状态

toc-image-width Table of Contents

toc-image-width属性指定将放置在HTML标题标记内容的of链接中的图像的宽度。 如果缺少toc-image-width属性或者toc-image-width属性值,则toc-image-width默认为" 16px"。 单位不需要,默认为像素。 如果需要像素以外的单位,则必须将它们作为后缀提供给作为宽度提供的整数。

toc-image-height Table of Contents

toc-image-height属性指定将放置在HTML标题标记内容的of链接中的图像的高度。 如果缺少toc-image-height属性或者toc-image-height属性值,则toc-image-height默认为" 16px"。 单位不需要,默认为像素。 如果需要像素以外的单位,则必须将它们作为后缀提供给作为高度提供的整数。

toc-header-level Table of Contents

toc-header-level属性指定将用于显示目录标题的HTML header 级别。 如果缺少toc-header-level属性,则将使用 HTML header 级别"h2"作为目录标题元素。

属性的值可以是任何 HTML header 级别"h2"。"h3"。"h4"。"h5"或者"n。h6"。 任何其他值都将被忽略,并且toc-header-level属性值将成为"h2"。

目录编号 Table of Contents

目录编号属性用于在HTML文档中生成和插入标题编号。 如果缺少目录编号属性,则不会生成标题编号。

如果存在toc编号属性但缺少目录编号属性值,则将使用"。h21,h31,H41,h51,h61"的级别列表将所有标题的标题编号插入到HTML文档中。 例如这里级别列表将产生以下标题编号:


1. H2 heading


1.1. H3 heading


1.1.1. H4 heading


1.1.1.1. H5 heading


1.1.1.2. H5 heading


1.1.1.2.1. H6 heading


2. H2 heading


2.1. H3 heading


2.2. H3 heading


2.2.1. H4 heading


2.2.1.1. H5 heading


2.2.1.1.1. H6 heading


2.2.1.2. H5 heading


2.2.2. H4 heading


2.3. H3 heading




如果一个大的HTML文档被分成单独的HTML文档,使用一个不同于一个HTML文档的级别列表可以连续。

例如大型HTML文档的一部分是:





<div class="toc" style="toc-numbering;"></div>


<h2>Heading 1</h2>


 :


 large amount of HTML


 :


<h2>Heading 2</h2>


 :


 large amount of HTML


 :


<h2>Heading 3</h2>


 :


 large amount of HTML


 :




在单个h2元素之间生成的HTML文本太大,无法适应所需的页面大小,因此,HTML文档将被分解为小的HTML文档,位于 h2 header 层。 但是,标题编号需要在文档的所有部分连续进行。 通过修改每个较小的HTML文档的级别列表属性,可以实现连续的header 编号。





<div class="toc" style="toc-numbering:h21;"></div>


<h2>Heading 1</h2>


 :


 large amount of HTML


 :



<div class="toc" style="toc-numbering:h22;"></div>


<h2>Heading 2</h2>


 :


 large amount of HTML


 :



<div class="toc" style="toc-numbering:h23;"></div>


<h2>Heading 3</h2>


 :


 large amount of HTML


 :




任何级别( a 通过 h6 ) 都可以指定它的起始级别号。

生成的目录 Table of Contents

生成 Table of Contents

以下讨论假定在提交到 auto toc生成器的HTML文档中找到以下目录 div:


<div class="toc">


</div>




将重写 toc div以显示在HTML文档处理过程中使用的属性。 toc标题被放在被重写的toc div的内容中的默认 header 级别条目( 在这种情况下 <> ) 中。 目录的标题被分配给类"生成的目录"。 之后的标题将显示一个生成的<div>,它将包含实际的目录。 这里 <div> 被分配给类"生成的目录"。 这个 <div>的第一个条目是用于从HTML文档中的位置返回目录的TOC书签("toc_return_to_toc")。 到目前为止,生成的toc div将显示为


<div class="toc"


     style="toc-headers:h2,h3,h4,h5,h6;


 toc-return:true;


 toc-title:Table of Contents;


 toc-return-image:/app_themes/codeproject/img/gototop16.png;


 toc-image_width:16px;


 toc-image_height:16px;


 toc-header-level:h2;" >


 <h2 class="toc-generated">Table of Contents</h2>


 <div class="toc-generated">


 <a id="toc_return_to_toc"


       name="toc_return_to_toc">&nbsp;</a>




通过在文档中嵌入 <> 元素,可以完全依赖文档的内容,其中嵌入了嵌套的<> 元素。 当遇到从属标题级别时发生嵌套。 给定以下 <_> 标记( HTML文档中的第二个):


<h2>Introduction</h2>




将在目录中生成以下条目


<li><a href="#toc_bookmark_1">Introduction</a></li>




而 <h2> 元素将被修改为


<h2>Introduction


 <a id="toc_bookmark_1"


     name="toc_bookmark_1"


     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"


     class="toc-generated" >


 <img alt="Table of Contents"


         title="Table of Contents"


         src="/app_themes/codeproject/img/gototop16.png"


         width="16px"


         height="16px" />


 </a>


</h2>




将删除任何现有的书签或者带有"生成的目录"类的链接。 在前面的示例中,在重新生成之前保留的所有内容都是:


<h2>Introduction</h2>




属性值( 例如 ,"toc_bookmark_1") 是由自动生成过程生成的,并且在HTML文档中是唯一的。 在此示例中,还生成了一个图像链接,单击该链接后将把阅读器返回到目录的顶部。

编号 Table of Contents

如果指定了目录编号,则为:





<div class="toc"


 style="toc-numbering;"


</div>




那么,toc div的初始部分将生成如下:


<div class="toc"


     style="toc-headers:h2,h3,h4,h5,h6;


 toc-return:true;


 toc-title:Table of Contents;


 toc-return-image:/app_themes/codeproject/img/gototop16.png;


 toc-image_width:16px;


 toc-image_height:16px;


 toc-header-level:h2;


 toc-numbering:h21,h31,h41,h51,h61;" >


 <h2 class="toc-generated">Table of Contents</h2>


 <div class="toc-generated">


 <a id="toc_return_to_toc"


       name="toc_return_to_toc">&nbsp;


 </a>




如果 <_> 元素是


<h2>Introduction</h2>




将在目录中生成以下条目


<li><a href="#toc_bookmark_1">2. Introduction</a></li>




而 <> 元素内容将被修改为


<h2><span class="toc-generated" >2.&nbsp;</span>Introduction


 <a id="toc_bookmark_1"


     name="toc_bookmark_1"


     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"


     class="toc-generated" >


 <img alt="Table of Contents"


         title="Table of Contents"


         src="/app_themes/codeproject/img/gototop16.png"


         width="16px"


         height="16px" />


 </a>


</h2>




示例 Table of Contents

如果将以下HTML文档提交到 auto toc生成器:


<!DOCTYPE html PUBLIC 



          "-//W3C//DTD XHTML 1.0 Transitional//EN" 



          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


 <title>Test Auto TOC Generation</title>


 <link type="text/css" 



        rel="stylesheet" 



        href="http://s.codeproject.com/App_Themes/CodeProject/Css/Main.min.css?dt=2.6.130426.1" />


 <style type="text/css">


. toc


 {


 }


. toc-generated


 {


 }


 </style>


</head>


<body style="margin: 20px;">


<div class="toc">


</div>


<h2>Header Level <b>2</b> - <i>Number 1</i></h2>


<p>H2 1</p>


<h3>Header Level 3 - Number 1</h3>


<p>H3 1</p>


<h4>Header Level 4 - Number 1</h4>


<p>H4 1</p>


<h4>Header Level 4 - Number 2</h4>


<p>H4 2</p>


<h5>Header Level 5 - Number 1</h5>


<p>H5 1</p>


<h6>Header Level 6 - Number 1</h6>


<p>H6 1</p>


<h4>Header Level 4 - Number 3</h4>


<p>H4 3</p>


<h3>Header Level 3 - Number 2</h3>


<p>H3 2</p>


<h2>Header Level 2 - Number 2</h2>


<p>H2 2</p>


</body>


</html>



将生成的HTML文档-div为:


<!DOCTYPE html PUBLIC 



          "-//W3C//DTD XHTML 1.0 Transitional//EN" 



          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


 <title>Test Auto TOC Generation</title>


 <link type="text/css" 



        rel="stylesheet" 



        href="http://s.codeproject.com/App_Themes/CodeProject/Css/Main.min.css?dt=2.6.130426.1" />


 <style type="text/css">


. toc


 {


 }


. toc-generated


 {


 }


 </style>


</head>


<body style="margin: 20px;">


<div class="toc"



     style="toc-headers:h2,h3,h4,h5,h6;


 toc-return:true;


 toc-title:Table of Contents;


 toc-return-image:/app_themes/codeproject/img/gototop16.png;


 toc-image_width:16px;


 toc-image_height:16px;


 toc-header-level:h2;" >


 <h2 class="toc-generated">Table of Contents</h2>


 <div class="toc-generated">


 <a id="toc_return_to_toc"



       name="toc_return_to_toc">&nbsp;</a>


 <ul>


 <li><a href="#toc_bookmark_0">Header Level <b>2</b> - <i>Number 1</i></a>


 <ul>


 <li><a href="#toc_bookmark_1">Header Level 3 - Number 1</a>


 <ul>


 <li><a href="#toc_bookmark_2">Header Level 4 - Number 1</a></li>


 <li><a href="#toc_bookmark_3">Header Level 4 - Number 2</a>


 <ul>


 <li><a href="#toc_bookmark_4">Header Level 5 - Number 1</a>


 <ul>


 <li><a href="#toc_bookmark_5">Header Level 6 - Number 1</a></li>


 </ul>


 </li>


 </ul>


 </li>


 <li><a href="#toc_bookmark_6">Header Level 4 - Number 3</a></li>


 </ul>


 </li>


 <li><a href="#toc_bookmark_7">Header Level 3 - Number 2</a></li>


 </ul>


 </li>


 <li><a href="#toc_bookmark_8">Header Level 2 - Number 2</a></li>


 </ul>


 <p>


 The symbol 


 <a href="#toc_return_to_toc">


 <img alt="Table of Contents"



           title="Table of Contents"



           src="/app_themes/codeproject/img/gototop16.png"



           width="16px"



           height="16px" />


 </a> 


 returns the reader to the top of the Table of Contents.


 </p>


 </div>


</div>



<h2>Header Level <b>2</b> - <i>Number 1</i>


 <a id="toc_bookmark_0"



     name="toc_bookmark_0"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h2>


<p>H2 1</p>


<h3>Header Level 3 - Number 1


 <a id="toc_bookmark_1"



     name="toc_bookmark_1"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h3>


<p>H3 1</p>


<h4>Header Level 4 - Number 1


 <a id="toc_bookmark_2"



     name="toc_bookmark_2"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h4>


<p>H4 1</p>


<h4>Header Level 4 - Number 2


 <a id="toc_bookmark_3"



     name="toc_bookmark_3"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h4>


<p>H4 2</p>


<h5>Header Level 5 - Number 1


 <a id="toc_bookmark_4"



     name="toc_bookmark_4"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h5>


<p>H5 1</p>


<h6>Header Level 6 - Number 1


 <a id="toc_bookmark_5"



     name="toc_bookmark_5"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h6>


<p>H6 1</p>


<h4>Header Level 4 - Number 3


 <a id="toc_bookmark_6"



     name="toc_bookmark_6"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h4>


<p>H4 3</p>


<h3>Header Level 3 - Number 2


 <a id="toc_bookmark_7"



     name="toc_bookmark_7"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h3>


<p>H3 2</p>


<h2>Header Level 2 - Number 2


 <a id="toc_bookmark_8"



     name="toc_bookmark_8"



     class="toc-generated" >


 </a>


 <a href="#toc_return_to_toc"



     class="toc-generated" >


 <img alt="Table of Contents"



         title="Table of Contents"



         src="/app_themes/codeproject/img/gototop16.png"



         width="16px"



         height="16px" />


 </a> 


</h2>


<p>H2 2</p>


</body>


</html>



TOC删除 Table of Contents

当对由 auto TOC生成器生成的HTML文档调用TOC删除过程时,所有生成的HTML将被删除。 这包括 toc div以及所有带有类"生成的目录"的元素。

实现 Table of Contents

auto toc生成器封装在 AutoTOCGeneration.cs 文件中。 两个入口点提供服务: add_TOC_to_htmlremove_TOC_from_html 。接受一个字符串参数,该参数是要执行的HTML。 返回一个字符串,其中包含可能已经修改的HTML。

AutoTOCGeneration.cs的使用别名指令为:


using DATA = Data.Data;


using ELEMENT = Element.Element;


using HTMLPARSER = HTMLParser.HTMLParser;


using TOC = TOCDIV.TOCDIV;


using TYPE = Constants.Constants.Element_Type;




这两种方法包括:


// ********************************************* add_TOC_to_html



/// <summary>


/// returns the html that was revised by applying the TOC-div


/// found in the supplied html


///


/// if a TOC-div is not found, returns the source html


/// </summary>


public static string add_TOC_to_html ( string html )


 {


 HTMLPARSER HTML_parser = new HTMLPARSER ( );


 string rewriten_html = html;



 HTML_parser.collect_all_desired_elements ( html );


 if ( TOC.HaveTOCDIV )


 {


 HTML_parser.revise_element_content ( );


 HTML_parser.eliminate_unwanted_elements ( );


 rewriten_html = rewrite_html ( html );


 }



 return ( rewriten_html );


 }





// ************************************** remove_TOC_from_html



/// <summary>


/// returns the html that has all auto-generated TOC entries


/// removed from the source html


/// </summary>


public static string remove_TOC_from_html ( string html )


 {


 HTMLPARSER HTML_parser = new HTMLPARSER ( );


 int html_start = 0;


 int html_to_copy = 0;


 StringBuilder sb = new StringBuilder ( );



 HTML_parser.collect_all_desired_elements ( html );


 HTML_parser.revise_element_content ( );


 foreach ( ELEMENT element in DATA.Elements )


 {


 // copy html up to the next


 // header or TOC-div element


 html_to_copy = element.ElementStartsAt -


 html_start - 1;


 if ( html_to_copy > 0 )


 {


 sb.Append ( html, html_start, html_to_copy );


 }


 // copy in the rewritten


 // contents of the element


 if ( element.ElementType == TYPE.TOCDIV )


 {



 }


 else


 {


 sb.AppendFormat ( "n<{0}>{1}</{0}>n",


 element.TagName,


 element.Content );


 }


 html_start = element.ElementEndsAt + 1;


 }


 html_to_copy = html.Length - html_start;


 sb.Append ( html, html_start, html_to_copy );



 return ( sb.ToString ( ) );


 }




HTML解析器封装在类HTMLParser中。 解析器最初是由开发的[^ ]。 主要的修改是对解析器进行的,因此它是对 <> ;<h3> ;h3 ;;<h4> ;,<h6,以及 <div。

生成器( 包括编号) 和删除进程都通过调用以下方法来初始化该 HTML HTML_parser.collect_all_desired_elements


// ****************************** collect_all_desired_elements



/// <summary>


/// all desired elements are headers (h2 though h6) and the


/// div with the class"toc"


/// </summary>


public void collect_all_desired_elements ( string html )


 {



 DATA.Source = html;


 position = 0;



 TOC.HaveTOCDIV = false;



 while (!eof ( ) )


 {


 ATTRIBUTES attributes = null;


 string element_class = String.Empty;


 string element_style = String.Empty;


 int end_of_content = position;


 int end_of_element = position;


 string end_tag_name = String.Empty;;


 int start_of_content = position;


 int start_of_element = position;


 string tag_name = String.Empty;


 string uppercase = String.Empty;



 skip_to_start_of_next_tag ( ); // <



 if ( eof ( ) )


 {


 break;


 }



 start_of_element = position;


 tag_name = retrieve_tag_name ( ); // ' ' or> 


 tag_name = tag_name.ToLower ( ).Trim ( );


 uppercase = tag_name.ToUpper ( ).Trim ( );


 // ignore empty tags


 if ( String.IsNullOrEmpty ( tag_name ) )


 {


 continue;


 }


 // ignore tags that are


 // not of interest


 else if (!CONST.TAG_END_TAG.ContainsKey (


 uppercase ) )


 {


 continue;


 }


 else if ( uppercase.Equals ( "DIV" ) )


 {


 attributes = retrieve_attributes ( );


 // ignore div tags without


 // attributes


 if ( attributes.Count == 0 )


 {


 continue;


 }


 element_class = attributes.


 attribute_value_by_name (


 CONST.TOC_CLASS_ATTRIBUTE_NAME );


 // ignore div tags without


 // class


 if ( String.IsNullOrEmpty ( element_class ) )


 {


 continue;


 }


 // ignore div tags without


 // the class"toc"


 else if (!element_class.Equals (


 CONST.TOC_CLASS_ATTRIBUTE_VALUE ) )


 {


 continue;


 }


 element_style = attributes.


 attribute_value_by_name (


 CONST.TOC_STYLE_ATTRIBUTE_NAME );


 }


 else


 {


 skip_past_tag_end ( ); // past> 


 }



 start_of_content = position;


 end_of_element = position;


 end_of_content = position;



 end_tag_name = CONST.TAG_END_TAG [ uppercase ];


 end_of_element = skip_to_end_of_element (


 uppercase,


 end_tag_name );


 end_of_content = end_of_element -


 end_tag_name.Length - 2;



 if ( end_of_element > 0 )


 {


 int length = 0;



 ELEMENT element = new ELEMENT ( tag_name,


 start_of_element,


 end_of_element );



 if (!String.IsNullOrEmpty ( element_class ) )


 {


 element.Class = element_class;


 }



 if (!String.IsNullOrEmpty ( element_style ) )


 {


 element.Style = element_style;


 }



 if ( start_of_content > 0 )


 {


 element.ContentStartsAt = start_of_content;


 }



 if ( end_of_content > 0 )


 {


 element.ContentEndsAt = end_of_content;


 }



 length = element.ContentEndsAt -


 element.ContentStartsAt;



 if ( length > 0 )


 {


 length++;


 element.Content = DATA.Source.Substring (


 element.ContentStartsAt,


 length );


 }


 else


 {


 element.Content = String.Empty;


 }



 if ( element.Class.Equals (


 CONST.TOC_CLASS_ATTRIBUTE_VALUE ) )


 {


 element.ElementType = CONST.Element_Type.


 TOCDIV;


 TOC.HaveTOCDIV = true;


 get_TOC_div_info ( element.Style );


 }



 DATA.Elements.Add ( element );


 }


 }


 }




下一班车是什么时候? HTML_parser.collect_all_desired_elements 返回,List 元素 将填充所有头和 <div> s,并返回 is <div>的存在。 TOC.HaveTOCDIV 为了使生成过程继续, TOC.HaveTOCDIV 必须返回 true 如果是 false 然后,不修改地返回源 HTML。 调用程序可以通过测试源的长度和返回的HTML来确定是否发生了这种情况。 如果长度相同,则找不到 toc div <>,并且没有进行任何修改。

删除过程不要求存在 toc div <div>。 它只查找包含 <的所有头元素( 包含> 或者 <span> 元素,这些元素。 然后移除这些元素。 它还删除了它所找到的任何现有。

HTML_parser.revise_element_content 被调用以移除任何现有的自动生成的。 它与 List 操作 元素 并移除类"生成的目录"中的所有元素。 这种删除的效果是将 HTML header 元素返回到它们的pre autotoc生成器表单。


// ************************************ revise_element_content



/// <summary>


/// removes existing auto-TOC generated content from <h?> and


/// <div> elements


/// </summary>


public void revise_element_content ( )


 {


 List < string > process = new List < string > ( );



 foreach ( ELEMENT element in DATA.Elements )


 {


 StringBuilder sb;



 process.Clear ( );



 switch ( element.ElementType )


 {


 case TYPES.HEADING2:


 case TYPES.HEADING3:


 case TYPES.HEADING4:


 case TYPES.HEADING5:


 case TYPES.HEADING6:


 process.Add ( "A" );


 process.Add ( "SPAN" );


 break;



 case TYPES.TOCDIV:


 process.Add ( "H2" );


 process.Add ( "DIV" );


 break;



 default:


 continue;


 }



 DATA.Source = element.Content;


 sb = new StringBuilder ( DATA.Source );


 position = 0;



 while (!eof ( ) )


 {


 ATTRIBUTES attributes = null;


 string element_class = String.Empty;


 int end_of_element = position;


 int start_of_element = position;


 string tag_name = String.Empty;



 skip_to_start_of_next_tag ( ); // <



 if ( eof ( ) )


 {


 break;


 }



 start_of_element = position;


 tag_name = retrieve_tag_name ( ); // ' ' or> 


 if ( String.IsNullOrEmpty ( tag_name ) )


 {


 break;


 }



 tag_name = tag_name.ToUpper ( ).Trim ( );


 if (!process.Contains ( tag_name ) )


 {


 skip_to_end_of_element ( tag_name );


 advance ( );


 continue;


 }



 attributes = retrieve_attributes ( );


 element_class = attributes.attribute_value_by_name (


 CONST.TOC_CLASS_ATTRIBUTE_NAME );


 element_class = element_class.ToUpper ( ).Trim ( );



 if (!element_class.Equals (


 CONST.TOC_GENERATED_CLASS.ToUpper ( ) ) )


 {


 skip_to_end_of_element ( tag_name );


 advance ( );


 continue;


 }



 end_of_element = skip_to_end_of_element (


 tag_name );



 sb.Remove ( start_of_element,


 end_of_element - start_of_element + 1 );


 DATA.Source = sb.ToString ( );



 position = start_of_element + 1;


 }



 DATA.Source.Replace ( CONST.CR, "" );


 DATA.Source.Replace ( CONST.NL, "" );


 DATA.Source.Replace ( "", "" );


 DATA.Source = DATA.Source.Trim ( );



 element.Content = DATA.Source;


 }


 }




注意,源HTML不参与任何已经生成的自动生成的内容的删除。 处理参与内存中的部分 元素 列表。

在生成模式下 HTML_parser.eliminate_unwanted_elements 被调用,这里时将发现 dbo div属性,因这里可以从内存中删除那些不感兴趣的头 元素 列表。


// ******************************* eliminate_unwanted_elements



/// <summary>


/// during collection, all headers were collected; at this


/// point in processing, the TOC-div properties have been


/// discerned so those headers not of interest can be removed


/// </summary>


public void eliminate_unwanted_elements ( )


 {


 // there must be a better way


 // than this


 if ( DATA.DesiredHeaders.Count > 0 )


 {


 List < ELEMENT > new_elements;



 new_elements = new List < ELEMENT > ( );



 foreach ( ELEMENT element in DATA.Elements )


 {


 string uppercase = element.TagName.ToUpper ( );



 if ( DATA.DesiredHeaders.Contains ( uppercase ) ||


 ( element.ElementType == TYPES.TOCDIV ) )


 {


 new_elements.Add ( element );


 }


 }



 DATA.Elements.Clear ( );


 DATA.Elements.AddRange ( new_elements );


 }


 }




复制过程通过 HTML,由收集的header 和 <div> 数据引导。 这是由 remove_TOC_from_html 源代码,上面。 它还演示了 rewrite_html 鏂规碜。


// ********************************************** rewrite_html



/// <summary>


/// returns the html that was rewritten using the generated


/// TOC-div and the new headers


/// </summary>


static string rewrite_html ( string html )


 {


 int html_start = 0;


 int html_to_copy = 0;


 StringBuilder sb = new StringBuilder ( );


 string TOC_div = string.Empty;


 // invoke generate_TOC_div


 // before going through the


 // elements; it generates the


 // element bookmarks that are


 // needed in new_header


 TOC_div = generate_TOC_div ( );


 foreach ( ELEMENT element in DATA.Elements )


 {


 // copy html up to the next


 // header or TOC-div element


 html_to_copy = element.ElementStartsAt -


 html_start - 1;


 if ( html_to_copy > 0 )


 {


 sb.Append ( html, html_start, html_to_copy );


 }


 // copy in the rewitten


 // contents of the element


 if ( element.ElementType == TYPE.TOCDIV )


 {


 sb.Append ( TOC_div );


 }


 else


 {


 sb.Append ( new_header ( element ) );


 }


 html_start = element.ElementEndsAt + 1;


 }


 html_to_copy = html.Length - html_start;


 sb.Append ( html, html_start, html_to_copy );



 return ( sb.ToString ( ) );


 }




演示 Table of Contents

auto toc生成器对话框工具是用来测试两种方法 add_TOC_to_htmlremove_TOC_from_html 但是,由于实际重写的HTML是有用的,因这里它在本文的下载中提供。

生成演示 Table of Contents

ATG Startup

工具的输入通过在HTML输入选项卡中的RichTextBox进行。 可以通过以下三种方式提供输入:

1.通过直接将HTML复制到 RichTextBox。
2.通过使用浏览按钮选择一个HTML文件。
3.选中use测试文件CheckBox复选框并选择下拉列表中显示的一个文本文件。

为了使用最后一个选项,目录"n。计量经济学"必须位于从工具可执行文件到本地文件系统 root ( 例如 ,"c:")的路径中。 通过将下载文件( autotocgeneration.zip ) 中的所有项提取到任何单个目录中,这是最容易完成的。

当提供了HTML输入选项卡RichTextBox内容时,将显示生成按钮。 如果HTML包含字符串"生成的目录",删除按钮也会出现。

ATG Generate

在示例 上面 中,浏览按钮用于获取本文的HTML。 注意,在底部附近,定义了一个 toc div。 注意,即使没有发生TOC生成,移除按钮也是可见的。 这是因为本文包含了字符串"生成的目录"。

可以在单击生成按钮之前修改HTML输入选项卡RichTextBox的内容。

工具不可访问。 因此,单击生成按钮后,它的可见性将设置为 false。 要对另一个HTML文件应用该工具,必须执行该工具。

ATG Generated

当单击生成按钮时, add_TOC_to_html 方法,则针对HTML输入选项卡RichTextBox的内容调用。 执行的结果被放置在修改后的HTML选项卡RichTextBox中。

在示例 上面 中,所有标题都已经修改。 此外,( 虽然不可见) 还被替换为描述的上面

支持两个选项卡之间的导航。

如果需要,可以保存修订后的HTML。 通过单击保存按钮并完成保存文件对话框来实现这一点。

删除演示 Table of Contents

Removal Input

文件 RemovalTest.htm 位于 sql TestCases目录中。 RemovalTest文件显示在下面的示例中。

单击"删除"按钮时,出现下面的示例。

Removal Output

auto toc生成工具已经删除了由 auto toc生成器生成的所有 HTML,并从HTML文档中删除了 toc div元素。

自动toc生成器状态 Table of Contents

自动toc发生器目前测试中。 如果读取器发现任何错误,请向他们报告 below ( 在评论和讨论中)。 我将尽快回复。

Return to Toc

在代码项目不会发布的HTML文档中,可以在下载过程中使用一个可以用于toc图像的图形,该图像为1 x x x。 我建议将宽度和高度设置为 16 ( 像对左边的图像一样)。 图像上没有版权限制。

结论 Table of Contents

本文提供了一个HTML创作工具,它为HTML文档生成了一个内容的table。 此外,它可以被定向为产生带编号的。

引用 Table of Contents

开发环境 Table of Contents

在以下环境中开发了自动toc生成器:

Microsoft Windows 7专业服务包 1
Microsoft Visual Studio 2008 Professional
Microsoft. NET 框架版本 3.5 SP1
Microsoft Visual C# 2008
Microsoft PowerPoint 2003 SP3

历史 Table of Contents

04/10/2015原始文章
04/11/2015修复了印刷错误;向Implemenation添加文本

AUTO  HEAD  number  Header  TOC  
相关文章