javascript - 查找事件 - 尚未被 A 标签包围 - 并被 A 标签包围

Question

我正在尝试充分利用 HTML 定义列表，作为带有工具提示的词汇表。请看this fiddle预期结果(在底部)。

如果文章中的部分文本与定义列表中的术语匹配，则会显示一个带有匹配定义的工具提示框。这是通过周围的 A 标签完成的。到目前为止一切顺利。

现在的问题是如何解析文章，以便词汇表中可以找到的所有部分都自动被 A 标签包围。条款可以是例如:

• 组
• 社会团体
• 群体行为
• 研究

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

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; });

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

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

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

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

我的问题是检查某个字符串是否已经在 A 标签中，以及将 A 标签放在文本的一部分周围。应避免替换以保持大写/小写相同。检查 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 示例:

<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);
});