Question

我有一个Word文档，我将其保存为单页Web HTML文件。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="WordSection2">
	<p class="Special">
		<b style="mso-bidi-font-weight:normal"><span style="font-size: 14.0pt;font-family:&quot;Arial&quot;,&quot;sans-serif&quot;">Table of Contents<o:p></o:p></span></b>
	</p>
	<p class="MsoToc1">
		<!--[if supportFields]><span style='mso-element:field-begin'></span><span
style='mso-spacerun:yes'>&nbsp;</span>TOC \o &quot;1-4&quot; <span style='mso-element:
field-separator'></span><![endif]-->
		1. Introduction<span style="mso-tab-count: 1 dotted">.......................................................................................................................................... </span>
		<!--[if supportFields]><span
style='mso-element:field-begin'></span> PAGEREF _Toc251612863 \h <span
style='mso-element:field-separator'></span><![endif]-->
		1
		<!--[if gte mso 9]><xml>
 <w:data>08D0C</w:data>
</xml><![endif]-->
		<!--[if supportFields]><span style='mso-element:field-end'></span><![endif]-->
		<span style="mso-bidi-font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;;font-weight: normal"><o:p></o:p></span>
	</p>
	<p class="MsoToc2">
		1.1 Hello world<span style="mso-tab-count:1 dotted">......................................................................................................................................... </span>
		<!--[if supportFields]><span
style='mso-element:field-begin'></span> PAGEREF _Toc251612864 \h <span
style='mso-element:field-separator'></span><![endif]-->
		2
		<!--[if gte mso 9]><xml>
 <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200350031003600310032003800360034000000</w:data>
</xml><![endif]-->
		<!--[if supportFields]><span style='mso-element:field-end'></span><![endif]-->
		<span style="mso-bidi-font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><o:p></o:p></span>
	</p>
	<p class="MsoToc2">
		1.2 Program structure<span style="mso-tab-count:1 dotted">............................................................................................................................... </span>
		<!--[if supportFields]><span
style='mso-element:field-begin'></span> PAGEREF _Toc251612865 \h <span
style='mso-element:field-separator'></span><![endif]-->
		3
		<!--[if gte mso 9]><xml>
 <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200350031003600310032003800360035000000</w:data>
</xml><![endif]-->
		<!--[if supportFields]><span style='mso-element:field-end'></span><![endif]-->
		<span style="mso-bidi-font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><o:p></o:p></span>
	</p>
	<p class="MsoToc2">
		1.3 Types and variables<span style="mso-tab-count:1 dotted">............................................................................................................................. </span>
		<!--[if supportFields]><span
style='mso-element:field-begin'></span> PAGEREF _Toc251612866 \h <span
style='mso-element:field-separator'></span><![endif]-->
		4
		<!--[if gte mso 9]><xml>
 <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200350031003600310032003800360036000000</w:data>
</xml><![endif]-->
		<!--[if supportFields]><span style='mso-element:field-end'></span><![endif]-->
		<span style="mso-bidi-font-size:11.0pt;font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><o:p></o:p></span>
	</p>
	</body>
	</html>

(jsbin is here)

我想将右侧数字包装为 Anchors （<a href="#..." >）以重定向到文档的其他部分。

右边的数字我的意思是：

enter image description here

所以，看看html结构：

enter image description here

问题：

我想将1包裹为<a href="#_toc25162863" >1</a>

和

我想将2包裹为<a href="#_toc251612864" >2</a>

使用jQuery获取1没有问题，但如何从_Tocxxxx值的上一个注释元素中获取1？

Answer 1

https://jsbin.com/gofefe/4/edit?html,js,console,output

$(document).ready(function(){
    var refStartWith =  '_Toc|_Ref';
    var regex = new RegExp('(PAGEREF|REF)[\s\n\r ]*?('+refStartWith+')');

    $(".WordSection2 [class^=MsoToc],[class^=MsoNormal],[class^=MsoListBullet]").each(function(i,e){ // apply to your elements instead of body
        $(e).contents().filter(function(){

        return this.nodeType == 8; // select only comments

    }).filter(function(){
        var that = this;
        var matching = that.nodeValue.match(regex);
        if(matching){
            $.each(matching.input.split(/[\r\n \t]/),function(i,e){
                if(e.match(/^(_Toc|_Ref)/)) that.myref = e; // Define the correct ref to set the futue anchor id
            });
        } 
        return matching;

    }).each(function(i, e){

        var wrapper_id = '#_' + e.myref.charAt(1) + e.myref.slice(2); // format the anchor id
        var wrapper = '<a href="' + wrapper_id +'">';       
        $(e.nextSibling).wrap(wrapper);

    });});
});

Answer 2

您可以尝试jQuery comments() plugin从HTML中获取评论。用法：

var comments = $( "#sample" ).comments();
console.log( comments.html() );

如何在jQuery中获取之前的注释元素？

2 个答案: