使用querySelectorAll从html页面中提取LaTeX方程块

Question

我试图从HTML页面（用latex2html生成）中提取LaTeX方程公式，以便用mathjax公式替换LaTeX公式图像。

首先，我有以下想法，这里有一个例子：

输入：

  <div align="CENTER" class="mathdisplay"><a name="eq402"></a><!-- MATH
 begin{equation}
text{d},v_{k}=partial_{j},v_{k},dfrac{text{d},y^{j}}{text{d},s},text{d},s
end{equation}
 -->
<table class="equation" cellpadding="0" width="100%" align="CENTER">
<tr valign="MIDDLE">
<td nowrap align="CENTER"><span class="MATH">d<img width="150" height="65" align="MIDDLE" border="0" src="img1919.gif" alt="$displaystyle ,v_{k}=partial_{j},v_{k},dfrac{text{d},y^{j}}{text{d},s},text{d},s$"></span></td>
<td nowrap class="eqno" width="10" align="RIGHT">
(<span class="arabic">5</span>.<span class="arabic">65</span>)</td></tr>
</table></div>

通过在HTML页面底部插入以下JavaScript代码：

<script type="text/javascript">
function transform() {
        
        [].forEach.call(document.querySelectorAll('table tr img'),function(img) {
                var puretext = img.getAttribute('alt');
                if(!puretext || puretext == 'up' || puretext == 'previous' || puretext == 'next' || puretext == 'contents') return;
                puretext = puretext.replace(/..displaystyle /g,"$");
                var text = document.createTextNode(puretext);
                img.parentNode.insertBefore(text, img);
                img.style.display = 'none';
        });
}
transform();
</script>

我在HTML页面上得到了以下渲染，即我有mathjax公式：

$,v_{k}=partial_{j},v_{k},dfrac{text{d},y^{j}}{text{d},s},text{d},s$

这可能已经足够了，但我注意到，有时，在HTML页面中；CCD_ 3"；归因于一个不完整的公式，这里有一个例子：

<div align="CENTER" class="mathdisplay"><a name="eq407"></a><!-- MATH
 begin{equation}
text{d},(mathbf{V},cdot,mathbf{n})=mathbf{V_{M}}(M'),cdot,mathbf{n}-mathbf{V}(M),cdot,mathbf{n}=[mathbf{V_{M}}(M')-mathbf{V}(M)],cdot,mathbf{n}=text{d},mathbf{V},cdot,mathbf{n}
end{equation}
 -->
<table class="equation" cellpadding="0" width="100%" align="CENTER">
<tr valign="MIDDLE">
<td nowrap align="CENTER"><span class="MATH">d<img width="538" height="38" align="MIDDLE" border="0" src="img1929.gif" alt="$displaystyle ,(mathbf{V},cdot,mathbf{n})=mathbf{V_{M}}(M'),cdot,mat...
...V}(M),cdot,mathbf{n}=[mathbf{V_{M}}(M')-mathbf{V}(M)],cdot,mathbf{n}=$">d<img width="56" height="34" align="MIDDLE" border="0" src="img1930.gif" alt="$displaystyle ,mathbf{V},cdot,mathbf{n}$"></span></td>
<td nowrap class="eqno" width="10" align="RIGHT">
(<span class="arabic">5</span>.<span class="arabic">70</span>)</td></tr>
</table></div>

正如你所看到的；CCD_ 4"；<img:的属性

$displaystyle ,(mathbf{V},cdot,mathbf{n})=mathbf{V_{M}}(M'),cdot,mat...
...V}(M),cdot,mathbf{n}=[mathbf{V_{M}}(M')-mathbf{V}(M)],cdot,mathbf{n}=$

整个LaTeX方程尚未由latex2html生成（见…字符）

所以我不能总是处理img alt属性，我想使用HTML注释标签（<!-- ... -->）中的begin{equation} ... end{equation}块

如何使用querySelectorAll获取此comments block？例如，它是否存在document.querySelectorAll('div.mathdisplay a comments'),function(comments) {或类似的东西，可以提取这段评论？

如果我能得到这个文本块，我会把它保存到一个变量中，并像我第一个想法一样，在img标记之前插入它，如下所示：

 var text = document.createTextNode(puretext);
                    img.parentNode.insertBefore(text, img);
                    img.style.display = 'none';

Answer 1

您可以使用TreeWalker，它本机支持实用的节点过滤策略，如NodeFilter.SHOW_COMMENT。

var walker = document.createTreeWalker(
      document.documentElement, 
      NodeFilter.SHOW_COMMENT
    ),
    frag = document.createDocumentFragment(),
    li, node;
while (node = walker.nextNode()) {
  li = document.createElement('li');
  li.textContent = node.textContent;
  frag.appendChild(li);
}
document.getElementById('comment-list').appendChild(frag);

<!-- This is a comment -->
<div>
    <!-- This is another comment -->
</div>
<ul id="comment-list">
</ul>