Question

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

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

输入：

  <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页面中，我有＃34; alt＆＃34;属性不完整的公式，这是一个例子：

<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>

正如你所看到的，我有＃34; alt＆＃34;属性<img：

$ \ displaystyle \，（\ mathbf {V} \，\ cdot \，\ mathbf {n}）= \ mathbf {V_ {M}}（M＆＃39;）\，\ cdot \，\ mat。 .. ... V}（M）\，\ CDOT \，\ mathbf {N} = [\ mathbf {V_ {M}}（M＆＃39;） - \ mathbf {V}（M）] \，\ CDOT \ ，\ mathbf {N} = $

latex2html尚未生成整个乳胶方程（参见...字符）

所以我无法始终处理img alt属性，我想使用\begin{equation} ... \end{equation}块进入HTML评论标记（）

如何使用comments block获取此querySelectorAll？是否存在例如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>

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

1 个答案: