javascript - 使用JS自动从文本底部显示引用书目

Question

我们的网站上有专业书籍文章，如下所示:

<h2>Article heading</h2>
<p>Text text text text text text[1] text text text text.</p>
<p>Text text text text text text text text text text.</p>
<p>Text text text[2] text text text text text text text.</p>
<p>Text text text text text text text text text text.</p>
<h3>Bibliography</h3>
<p>[1] NAME OF AUTHOR, Book, ISBN, etc.</p>
<p>[2] NAME OF ANOTHER AUTHOR, Book 2, ISBN, etc.</p>

它存储在数据库(一个表)中，我们无法在 HTML 输出中更改它，只能在 HTML 模板 + JS 中进行后处理。

我们希望页面加载后会自动附加来自的文本 引用书目部分与文本中的编号相对应。当鼠标悬停在文本中的数字上时，用 JS 或 CSS 显示它(我们可以这样做)。但我们找不到如何制作搜索/附加技巧部分的解决方案。

有人解决过类似的任务吗？或者有什么建议或更好的例子吗？

PS:引用书目每次都以“

引用书目

”开头，位于全文的底部。每本书都以“[数字]”开头。

Answer 1

考虑到您的限制以及 HTML 输出中严重缺乏识别元素，没有真正好的方法来做到这一点......但它仍然是可能的。你可以尝试这样的事情:

<小时/>

首先创建引用书目项目的数组:

var biblioArr = [];
var i = 1;
// Create array of bibliography items.
$("h3").nextAll("p").each(function(){ // Find each <p> after <h3>
    biblioArr[i] = $(this).html(); // Add <p> html to array
    i = i+1;
});

现在在文本中找到相应的标记并更改 HTML:

i = 1;
// Add each array item to corresponding text as anchor titles.
$("h2").nextUntil("h3").each(function(){ // Find each <p> after <h2> until <h3>
    var textHtml = $(this).html(); // Grab the content of <p>
    if (textHtml.indexOf("["+i+"]") >= 0) { // If index found in this <p>
        textHtml = textHtml.replace("["+i+"]", "[<a href='#' class='biblio-anchor' title='"+biblioArr[i]+"'>"+i+"</a>]"); // Create new anchor
        $(this).html(textHtml); // Add new content
        i = i+1;
    }
});

<强> Here is a working jsfiddle .

<小时/>

您可以根据需要设置翻转/弹出窗口/标题/工具提示的样式。

请注意，这假设您的引用书目项目始终按顺序出现(即 2 始终在 1 之后)。另请注意，这种事情更适合服务器端执行，jquery 在这些情况下的性能可能不太好。

另一种选择是使用预先存在的插件，例如 this one .