Question

我正在尝试充分利用HTML 定义列表，以作为带有工具提示的词汇表。请参阅this fiddle了解预期结果（位于底部）。

如果文章中的部分文本与定义列表中的条款匹配，则会显示带有匹配定义的工具提示气泡。这是通过周围的A标签完成的。到目前为止一切都很好。

现在的问题是如何解析文章，以便在词汇表中找到的所有部分将自动被A-tags包围。这些术语可以是：

group
社交群组
群体行为
研究

解析必须是“贪婪的”，因此它首先解析最长的定义。

var arr = []; /* Array of terms, sorted by length */
$('#glossary dt').each( function() { arr.push($(this).text()); });
arr.sort(function(a,b) { return b.length - a.length; });

接下来，它必须用＃-tags包围＃article.html中第一个数组项的出现，除非它们已经在A-tags中。这也应该是不区分大小写的。

/* don't know how to approach this */

最后移动到下一个数组项并重复。

/* ok, i can figure the loop out myself */

我的问题是检查某个字符串是否已经在A-tags中，并且还在文本的一部分周围放置A-tags。应避免更换以保持大写/小写相同。检查JSfiddle的预期结果。

编辑：在下面的plalx解决方案的基础上，我提出了以下代码：

/*
This script matches text strings in an article with terms in a defintion list (DL);
the DL acts as a glossary. The text strings are wrapped in '<span>' tags,
with the 'title' attribute containing the definition. This allows for easy custom tooltips.

- This script is 'greedy' the longest terms are matched first;
- This script preserves capitalization and escapes HTML in the definitions
 */
var $article = $('#container-inhoud');
var $terms = $('#glossary dt');
//clone to avoid multiple DOM reflows
var $clone = $article.clone();

//create a regex that matches all glossary terms (not case-sensitive), sorted by length
var rx = new RegExp('\\b(' + $terms.map(function () {
            return $(this).text();
        }).get().sort(function (term1, term2) {
                    return term2.length - term1.length;
                }).join('|') + ')\\b', 'ig');


var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
        return entityMap[s];
    });
}

//wrap any text string that corresponds with a definition term in a 'span' tag
//the title contains the connected definition.
function replacer(match){
        var definition = $terms.filter(function() {
            return $(this).text().toLowerCase() == match.toLowerCase();
        }).next('dd').text();
        definition = escapeHtml(definition);
        return '<span class="tooltip" title="' + definition + '">' + match + '</span>';
}

//call the replace function for every regex match
$clone.html($clone.html().replace(rx , replacer));

//unwrap the terms in the glossary section (to avoid tooltips within the glossary itself)
//only needed if the #glossary is within the #article container, otherwise delete the next line.
$clone.find('#glossary .tooltip').contents().unwrap();

$article.replaceWith($clone);

以下代码显示工具提示。

/*
 This script displays a tooltip for every 'span' with class 'tooltip'.
 The 'title' attribute will be displayed as the tooltip.
 The tooltip is displayed directly above and in line with the left side of the element.
 Any offsetting is done by manipulation the 'left' and 'top' attributes in the CSS.
 */
$("span.tooltip").hover(
        function () {
            var bubble = $("#bubble");
            bubble.text($(this).attr('title'));
            var ypos = $(this).offset().top - bubble.height();
            var xpos = $(this).offset().left;
            bubble.css({"left":xpos+"px","top":ypos+"px"});
            bubble.show();
        },
        function () {
            $("#bubble").hide();
        }
);

我曾经按照CSS来格式化工具提示泡泡：

#bubble{
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #888;
            color: #ee6c31;
            background-color: rgba(255, 255, 255, 0.85);
            position:absolute;
            z-index:200;
            padding:5px 8px;
            margin: -15px 5px 5px -10px;
            display:none;
        }

Answer 1

我为你精心设计了一个解决方案。我想这就是你想要的：

HTML SAMPLE：

<div id="glossary">
    <dt>test</dt>
    <dt>Testing</dt>
    <dt>something</dt>
    <dt>some other thing</dt>
    <dt>long test</dt>
</div>

<div id="article">
    this is a test, to see if Testing will correctly be wrapped by something, or some other thing.
    This <a data-glossary-term href="#test">test</a> should not be wrapped again however, <span>something</span> should!
    Very long test should also be wrapped first.
</div>

JS：

$(function () {
    var $article = $('#article'),
        //clone to avoid multiple DOM reflows
        $clone = $article.clone(),
        //create a regex that matches all glossary terms (not case-sensitive)
        rx = new RegExp('\\b(' + $('#glossary dt').map(function () {
            return $(this).text();
        }).get().sort(function (term1, term2) {
            return term2.length - term1.length;
        }).join('|') + ')\\b', 'ig');

    //unwrap previously wrapped glossary terms to avoid issues
    //this would not be needed if your initial markup doesn't have terms wrapped already
    $clone.find('[data-glossary-term]').each(function () {
        $(this).replaceWith(this.childNodes);
    });

    //wrap terms in the 'a' tag
    $clone.html($clone.html().replace(rx, '<a data-glossary-term="$1" href="#$1">$1</a>'));

    $article.replaceWith($clone);
});

Answer 2

不是将dt文本收集到数组中，而是自己收集dom项，然后创建一个这样的函数：

function add_tags(td) {
    var dd = td.next(),
        q = td.text()
        txt = dd.text().replace(q, '<a href="#">'+q+'</a>');

    dd.html(txt);
};

然后循环它。您可能想要添加一些检查功能，以查看您的单词周围是否已有任何标签，但这是一个好的起点

查找事件 - 尚未被A标签包围 - 并由A标签环绕

2 个答案: