如何用JavaScript从HTML中获取原始LaTeX习题字符串？

核心思路：把原始LaTeX字符串单独存在DOM元素的自定义属性里，避开JS读取渲染后的混合DOM内容。

1. PHP生成HTML时存储原始LaTeX #

生成每个习题项的HTML时，给容器元素加data-latex属性，存入未渲染的原始LaTeX字符串，注意用htmlspecialchars转义特殊字符，防止破坏HTML结构：

纯LaTeX习题示例 #

$rawLatex = '$$\int_0^1 x^2\,dx$$';
// 转义LaTeX中的特殊字符，确保HTML属性值合法
$escapedLatex = htmlspecialchars($rawLatex, ENT_QUOTES);

echo '<div class="exercise-item" data-latex="' . $escapedLatex . '">';
echo '<input type="checkbox" class="exercise-checkbox">';
echo '<select class="exercise-select">';
echo '<option value="1">难度1</option>';
echo '<option value="2">难度2</option>';
echo '</select>';
echo '<div class="exercise-content">' . renderLatexToHtml($rawLatex) . '</div>'; // 这里是LaTeX转可显示HTML的逻辑
echo '</div>';

文本+LaTeX习题示例 #

$rawLatex = '计算下列定积分：$$\int_0^1 x^2\,dx$$';
$escapedLatex = htmlspecialchars($rawLatex, ENT_QUOTES);

echo '<div class="exercise-item" data-latex="' . $escapedLatex . '">';
echo '<input type="checkbox" class="exercise-checkbox">';
echo '<select class="exercise-select">';
echo '<option value="1">难度1</option>';
echo '<option value="2">难度2</option>';
echo '</select>';
echo '<div class="exercise-content">' . renderTextLatexToHtml($rawLatex) . '</div>'; // 处理文本+LaTeX的渲染逻辑
echo '</div>';

2. JS提取选中习题的原始LaTeX #

直接读取data-latex属性，不用解析DOM中的混合内容：

// 获取所有选中的习题复选框
const checkedExercises = document.querySelectorAll('.exercise-checkbox:checked');

// 提取对应的原始LaTeX字符串
const selectedLatexList = Array.from(checkedExercises).map(checkbox => {
    // 找到当前习题的容器元素
    const exerciseContainer = checkbox.closest('.exercise-item');
    // 直接读取data-latex属性值，就是原始的LaTeX字符串
    return exerciseContainer.dataset.latex;
});

// 现在selectedLatexList就是干净的原始LaTeX数组，可直接写入rmd文件
console.log(selectedLatexList);

为什么之前会得到混乱内容？ #

之前的逻辑应该是直接读取了习题容器内的文本或innerHTML，里面包含了下拉框的HTML代码、渲染后的LaTeX元素（比如MathJax生成的DOM节点），所以拿到的是混合了各种内容的拼接字符串。而把原始LaTeX存在自定义属性里，相当于给每个习题存了一份“纯净备份”，JS直接取这份备份就不会有干扰。

内容的提问来源于stack exchange，提问作者Pierluigi