Question

我正在编写一个脚本来创建工具提示，当用户将鼠标悬停在热点上时弹出工具提示。现在，我的具体用途是使用工具提示自动附加圣经参考，就像Logos（http://reftagger.com/#download）的RefTagger一样。我正在编写自己的脚本 - 而不是使用RefTagger - 因为1）我喜欢编程，我花了几个小时做它，2）这是完全自定义工具提示的外观以匹配我正在创建的网站的最简单方法。

现在，RefTagger所做的事情我似乎无法弄明白（在他们source code盯着他们两天之后！我是编程的新手，偶尔也会很难跟上节目使用字母作为一切的变量）是RefTagger中的JavaScript可以自动检测是否将圣经引用放在文本中并围绕它格式化工具提示。。。更不用说神秘隐藏的圣经，它首先从经文中汲取经文。

我不确定程序是否遍历DOM以查找引用或什么，但最接近的是那个给对象“b”的“traverseDOM”方法。我不太确定我在这里有意义，但任何帮助将不胜感激，这是一个例子：

<html>
<body>
<p>Rom 3:23</p>

<!-- RefTagger from Logos. Visit http://www.logos.com/reftagger. This code should appear directly before the </body> tag. -->
<script src="referenceTagging.js" type="text/javascript"></script>
<script type="text/javascript">
    Logos.ReferenceTagging.lbsBibleVersion = "ESV";
    Logos.ReferenceTagging.lbsLinksOpenNewWindow = true;
    Logos.ReferenceTagging.lbsLogosLinkIcon = "dark";
    Logos.ReferenceTagging.lbsNoSearchTagNames = [ "h2", "h3", "h3" ];
    Logos.ReferenceTagging.lbsTargetSite = "biblia";
    Logos.ReferenceTagging.tag();
</script>
</body>
</html>

这应该以链接形式出现在Rom 3:23中，然后将其悬停在它上面通常会显示工具提示，但对我而言，它一直在说它无法加载引用，我不确定为什么会发生这种情况。在任何情况下，我都很想知道RefTagger中的JavaScript如何在HTML文本中检测到圣经引用。我真的希望不是很明显：P

谢谢！

Answer 1

如果您需要从标题或类中生成工具提示 http://flowplayer.org/tools/tooltip/index.html

或http://craigsworks.com/projects/qtip/

如果你需要知道为什么使用reftagger的例子不起作用，请阅读

http://reftagger.com/#customize

为什么不起作用？

检查以确保JavaScript代码位于页脚中，最好是在结束</body>标记之前。 RefTagger仅搜索JavaScript代码之前的文本中的引用。
确保您的浏览器支持JavaScript，并且在您的浏览器设置中启用了JavaScript。
检查您是否限制RefTagger搜索显示圣经参考的HTML标记。例如，如果引用显示在粗体<b>标记中，请确保您没有选择粗体来自首选项中的标签列表。
在本地计算机上测试HTML页面时，RefTagger可能无法正常工作。如果尚未将其配置为Web服务器，您可能会看到消息“抱歉。此时无法加载此引用，“当鼠标悬停在引用超链接上时。将代码加载到您的网站并在那里进行测试。

Answer 2

如果您真的在分析了您发现的源代码之后我会尝试给我的两分钱。第一分：他们使用重量级的正则表达式，这里他们都是他们的光彩：

b.lbsRefQuickTest = new RegExp("((\\d{1,3})(?:\\s?\\:\\s?|\\.)(\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?))|(Ob(?:ad(?:iah)?)?|Ph(?:ilem(?:on)?|m)|(?:(?:2(?:nd\\s)?|[Ss]econd\\s|II\\s)|(?:3(?:rd\\s)?|[Tt]hird\\s|III\\s))\\s*J(?:o(?:hn?)?|h?n)|Jude?)", "i");
b.lbsRefRegExp = new RegExp("(\\W|^)((Z(?:e(?:p(?:h(?:aniah)?)?|c(?:h(?:ariah)?)?)|[pc])|W(?:is(?:d(?:om(?:\\s+of\\s+(?:Ben\\s+Sirah?|Solomon))?|.?\\s+of\\s+Sol))?|s)|T(?:ob(?:it)?|it(?:us)?|he(?:\\s+(?:Song\\s+of\\s+(?:Three\\s+(?:Youth|Jew)s|the\\s+Three\\s+Holy\\s+Children)|Re(?:velation|st\\s+of\\s+Esther))|ssalonians)|b)|S(?:us(?:anna)?|o(?:ng(?:\\s+(?:of\\s+(?:Thr(?:ee(?:\\s+(?:(?:Youth|Jew)s|Children))?)?|So(?:l(?:omon)?|ngs)|the\\s+Three\\s+Holy\\s+Children)|Thr))?)?|ir(?:a(?:c?h)?)?|OS)|R(?:u(?:th)?|o(?:m(?:ans)?)?|e(?:v(?:elation)?|st\\s+of\\s+Esther)?|[vm]|th)|Qoh(?:eleth)?|P(?:s(?:\\s+Sol(?:omon)?|a(?:lm(?:s(?:\\s+(?:of\\s+)?Solomon)?)?)?|Sol|s|l?m)?|r(?:ov(?:erbs)?|\\s+(?:(?:of\\s+)?Man|Az)|ayer\\s+of\\s+(?:Manasse[sh]|Azariah)|v)?|h(?:il(?:em(?:on)?|ippians)?|[pm])|Ma)|O(?:b(?:ad(?:iah)?)?|des)|N(?:u(?:m(?:bers)?)?|e(?:h(?:emiah)?)?|a(?:h(?:um)?)?|[mb])|M(?:rk?|ic(?:ah)?|a(?:t(?:t(?:hew)?)?|l(?:achi)?|r(?:k))|[tlk])|L(?:uke?|e(?:v(?:iticus)?|t(?:ter\\s+of\\s+Jeremiah|\\s+Jer))?|a(?:od(?:iceans)?|m(?:entations)?)?|[vk]|tr\\s+Jer|Je)|J(?:ud(?:g(?:es)?|ith|e)?|o(?:s(?:h(?:ua)?)?|n(?:ah)?|el?|hn|b)|nh?|e(?:r(?:emiah)?)?|d(?:th?|gs?)|a(?:me)?s|[ts]h|[rmlgb]|hn)|Is(?:a(?:iah)?)?|H(?:o(?:s(?:ea)?)?|e(?:b(?:rews)?)?|a(?:g(?:gai)?|b(?:akkuk)?)|g)|G(?:e(?:n(?:esis)?)?|a(?:l(?:atians)?)?|n)|E(?:z(?:ra?|e(?:k(?:iel)?)?|k)|x(?:o(?:d(?:us)?)?)?|s(?:th(?:er)?)?|p(?:ist(?:le\\s+(?:to\\s+(?:the\\s+)?Laodiceans|Laodiceans)|\\s+Laodiceans)|h(?:es(?:ians)?)?|\\s+Laod)?|c(?:cl(?:es(?:iast(?:icu|e)s)?|us)?)?|noch)|D(?:eut(?:eronomy)?|a(?:n(?:iel)?)?|[tn])|C(?:ol(?:ossians)?|anticle(?:\\s+of\\s+Canticle)?s)|B(?:el(?:\\s+and\\s+the\\s+Dragon)?|ar(?:uch)?)|A(?:m(?:os)?|dd(?:\\s+(?:Ps(?:alm)?|Es(?:th)?)|ition(?:s\\s+to\\s+Esther|al\\s+Psalm)|Esth)|c(?:(?:t)s)?|zariah|Es)|\u03C8|(?:4(?:th\\s)?|[Ff]ourth\\s|(?:IIII|IV)\\s)\\s*(?:Ma(?:c(?:c(?:abees)?)?)?)|(?:3(?:rd\\s)?|[Tt]hird\\s|III\\s)\\s*(?:Ma(?:c(?:c(?:abees)?)?)?|Jo(?:h(?:n)?)?|Jn\\.?|Jhn)|(?:(?:2(?:nd\\s)?|[Ss]econd\\s|II\\s)|(?:1(?:st\\s)?|[Ff]irst\\s|I\\s))\\s*(?:T(?:i(?:m(?:othy)?)?|h(?:es(?:s(?:alonians)?)?)?)|S(?:a(?:m(?:uel)?)?|m)?|P(?:e(?:t(?:er)?)?|t)|Ma(?:c(?:c(?:abees)?)?)?|K(?:i(?:n(?:gs)?)?|gs)|J(?:o(?:hn?)?|h?n)|Es(?:d(?:r(?:as)?)?)?|C(?:o(?:r(?:inthians)?)?|h(?:r(?:on(?:icles)?)?)?)))(?:\\.?\\s*(\\d{1,3})(?:\\s?\\:\\s?|\\.)(\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?)(\\s?(?:-|--|\\u2013|\\u2014)\\s?\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?((?:\\s?\\:\\s?|\\.)\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?)?(?!\\s*(?:T(?:i(?:m(?:othy)?)?|h(?:es(?:s(?:alonians)?)?)?)|S(?:a(?:m(?:uel)?)?|m)?|P(?:e(?:t(?:er)?)?|t)|Ma(?:c(?:c(?:abees)?)?)?|K(?:i(?:n(?:gs)?)?|gs)|J(?:o(?:hn?)?|h?n)|Es(?:d(?:r(?:as)?)?)?|C(?:o(?:r(?:inthians)?)?|h(?:r(?:on(?:icles)?)?)?))(?:\\W)))?)|(Ob(?:ad(?:iah)?)?|Ph(?:ilem(?:on)?|m)|(?:(?:2(?:nd\\s)?|[Ss]econd\\s|II\\s)|(?:3(?:rd\\s)?|[Tt]hird\\s|III\\s))\\s*J(?:o(?:hn?)?|h?n)|Jude?)\\s*\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?(?:\\s?(?:-|--|\\u2013|\\u2014)\\s?\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?)?)([,]?\\s?(?:"+h.join("|")+")|[,]?\\s?[(](?:"+h.join("|")+")[)])?",(b.lbsCaseInsensitive?"i":""));
b.lbsBookContRegExp = new RegExp("^((?:(?:[,;\\.]+)?\\s?(?:and|or|&|&amp;)?)\\s*(?:(?:(?:cf|Cf|CF)[.,]?\\s?(?:v(?:v|ss?)?[.]?)?)[.,]?\\s*)?)((\\d{1,3})(?:\\s?\\:\\s?|\\.)\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?(?:\\s?(?:-|--|\\u2013|\\u2014)\\s?\\d{1,3}(?:(?:\\s?\\:\\s?|\\.)\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?)?)?)");
b.lbsChapContRegExp = new RegExp("^((?:(?:[,;\\.]+)?\\s?(?:and|or|&|&amp;)?)\\s*(?:(?:(?:cf|Cf|CF)[.,]?\\s?(?:v(?:v|ss?)?[.]?)?)[.,]?\\s*)?)(\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?(?:\\s?(?:-|--|\\u2013|\\u2014)\\s?\\d{1,3}(?:(?:\\s?(?:[a-z]|ff))(?=\\W|$))?)?)(?!\\s*(?:st|nd|rd|th|T(?:i(?:m(?:othy)?)?|h(?:es(?:s(?:alonians)?)?)?)|S(?:a(?:m(?:uel)?)?|m)?|P(?:e(?:t(?:er)?)?|t)|Ma(?:c(?:c(?:abees)?)?)?|K(?:i(?:n(?:gs)?)?|gs)|J(?:o(?:hn?)?|h?n)|Es(?:d(?:r(?:as)?)?)?|C(?:o(?:r(?:inthians)?)?|h(?:r(?:on(?:icles)?)?)?)))"

第二分：所谓的traverseDom是他们自己的自定义函数（没有JS魔法），顾名思义：递归遍历所有DOM元素，寻找上述正则表达式之一的匹配。以下是可读格式的函数：

function traverseDom(f,y,t) {
    var n = t || 0;
    if(n > b.lbsMaxTreeDepth) {
        return 0
    }

    var m = 0, l = false, g = (f.tagName || "").toLowerCase(), q = f.className ? f.className.split(" ") : [], p = false, v, o, u, x;
    for (v = 0, o = b.lbsNoSearchClassNames.length; v<o; v++) {
        for(u = 0, x = q.length; u <x ;u++) {
            if (b.lbsNoSearchClassNames[v].toLowerCase() == q[u].toLowerCase()) {
                p = true;
                break
            }
        }
        if(p) {
            break
        }
    }

    if (f.nodeType === 3) {
        var r = f.nodeValue;
        m = b.refSearch(r, f, null, null, null, y)
    }
    else {
        if (g.length > 0 && (!b.lbsNoSearchTags[g] || g === "a") && !p) {
            y=null;
            if (g === "a") {
                var s = /^libronixdls:/i;
                if (s.test(f.href)) {
                    if((b.lbsAppendIconToLibLinks || b.lbsAppendIconToLogosLinks) && !(f.lastChild && f.lastChild.tagName && f.lastChild.tagName.toLowerCase() === "img")) {
                        b.insertLibLink(f, null)
                    }
                }
                else {
                    if(/bibleref/.test(f.className.toLowerCase())) {
                        l = b.tagBibleref(f, function(A, i, j) {
                            var C = b.normalizeReference(i), B = j || b.lbsBibleVersion;
                            b.addLinkAttributes(A, C, B)
                        })
                    }
                    else {
                        if (b.lbsConvertHyperlinks === true && f.childNodes.length === 1 && f.firstChild.nodeType === 3) {
                            var w = b.lbsHyperlinkTestList.length === 0;
                            for (var h in b.lbsHyperlinkTestList) {
                                if (f.href.toLowerCase().indexOf(h.toLowerCase()) >= 0) {
                                    w=true;
                                    break
                                }
                            }
                            if (w) {
                                y = f
                            }
                        }
                    }
                }

                if (y === null) {
                    return m
                }
            }

            if(g === "cite" && (/bibleref/).test(f.className.toLowerCase())) {
                l = b.tagBibleref(f,function(A,i,j) {
                    b.insertRefNode(i, A.innerHTML, j, A.firstChild);
                    A.removeChild(A.lastChild)
                })
            }

            if(!l) {
                var k = f.childNodes;
                v=0;
                while(v < k.length) {
                    var z = b.traverseDom(k[v], y, n+1);
                    v += z+1
                }
            }
        }
    }
    return m
}

Answer 3

我不确定程序是否遍历 DOM找到引用或什么

它会是什么 else ？加载程序时，您必须找到所有文本元素，在其中查找引用（使用合适的正则表达式）并将其替换为适当的cite元素。

让标记的引用元素实际上产生工具提示是下一个挑战。

使用JavaScript检测网页中的文本

3 个答案: