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：每次使用“＆lt; h3＆gt; Bibliography＆lt; / h3＆gt;”进行Biblography预制并位于整个文本的底部。每本书都以“[数字]”开头。

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。

使用JS从文本底部自动显示参考书目

1 个答案: