How can I get the previous comment element in jQuery?
I have a text document that I have saved as a single page HTML file.
<!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:"Arial","sans-serif"">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'> </span>TOC \o "1-4" <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:"Calibri","sans-serif";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:"Calibri","sans-serif""><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:"Calibri","sans-serif""><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:"Calibri","sans-serif""><o:p></o:p></span>
</p>
</body>
</html>
I want to wrap the right side numbers as anchors ( <a href="#..." >
) to redirect to another part of the document.
On the right-hand side, I mean:
So looking at the html structure:
Question:
I want to wrap 1
like<a href="#_toc25162863" >1</a>
and
I want to wrap 2
like<a href="#_toc251612864" >2</a>
No problem getting 1
with jQuery, but how can I get the _Tocxxxx
values from the previous note element 1
?
+3
source to share
2 answers
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);
});});
});
+2
source to share
You can try the jQuery comments () plugin to get comments from HTML. Using:
var comments = $( "#sample" ).comments();
console.log( comments.html() );
+1
source to share