formatMath复杂公式图片转文字

第一种方法：template模板中的公式进行转换

第一步引用
<link href="https://cdn.bootcss.com/KaTeX/0.10.2/katex.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/KaTeX/0.10.2/katex.min.js"></script>
<script src="https://cdn.bootcss.com/KaTeX/0.10.2/contrib/auto-render.min.js"></script>

第二步 相关文字进行转码
<p>{{@ $value.questionstem | formatFill}}</p>

第三步 给试题父级盒子

<!-- 试题 -->
<div class="testlist"></div>
<!-- 试题 -->

第四步 公式模板
html = formatMath(html); 是重点 。formatFill 对应的是html中的formatFill

//公式模板
template.defaults.imports.formatFill = function(html) {
	var reg = /\{\*{3,}\}/g;
	html = html.replace(reg, '______');
	html = formatMath(html);
	console.log(html);
	return html
}

打印出的html为

<p>如图，在四边形ABCD中，AB=1，BC=1，CD=2，DA=<span class="math inline">$\sqrt{6}$</span> ，且∠ABC=90°，则四边形ABCD的面积是（　　）</p><p>
<img src="https://static1.wkzj.com/web/testlibimage/B30386806BC7CB1B7F683F679086B468.png"></p>

第五步

// 复杂公式转换
formatMath = function (html) {
	var reg1 = /<img[^>]*?src="[^"]*?"[^>]*?data-latex[^>]*?>/i;
	var reg2 = /data-latex\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i;
	var reg3 = /\\hfill/gi;
	while (reg1.test(html)) {
		var latex = reg2.exec(html)[1];
		latex = latex.replace(reg3, '');
		if (latex == '&lt;') {
			latex = '<';
		}
		if (latex == '&gt;') {
			latex = '>';
		}
		html = html.replace(reg1, '$' + latex + '$');
	}
	// 去掉controls
	var reg4 = /controls=""/gi;
	var reg5 = /\$\$/gi;
	html = html.replace(reg4, '');
	html = html.replace(reg5, '');
	return html
};

// 公式渲染
function doSubmit() {
	renderMathInElement($('.testlist')[0], {
		delimiters: [{
				left: "$$",
				right: "$$",
				display: true
			},
			{
				left: "$",
				right: "$",
				display: false
			}
		]
	});
}

第六步加载时渲染

// 题目的渲染
function questionRender(selector, data) {
    var htmls = template('questiontpl', data);
    $(selector).html(htmls);
    slider = mui('#questionArea').slider();
    doSubmit();
}