只替換第一個字出現

Question

我有一個單詞列表。如果其中一個單詞出現在文檔中，則匹配需要用鏈接替換。到目前爲止，我已經有了這個工作，但腳本取代了所有的事件。我如何通過在第一個詞被替換時停止循環來防止這種情況，並繼續下一個詞？

編輯：嵌入在代碼中的一個片段：

$(document).ready(function(){ 
 
    
 
    function replaceWordsWithLinks(_glossaryWords, _language) { 
 

 
    $.each(_glossaryWords, function (index, wordobject) { 
 
     console.log(wordobject.name); 
 

 
     var link = '<a class="link link--glossary" title="Open Glossary" data-glossaryid="' + wordobject.link_id + '" data-language="' + _language + '">' + wordobject.name + '</a>'; 
 

 
     $('p').html(function() { 
 
     if (!$(this).parents('.glossary-no-replace').length) { 
 
      return $(this).one().html().replace(wordobject.name, link); 
 
     } 
 
     }); 
 
     $('span').html(function() { 
 
     if (!$(this).hasClass('glossary-no-replace') || !$(this).parent().attr('class') == 'breadcrumb' || !$(this).parent().attr('class') == 'glossary-no-replace') { 
 
      return $(this).html().replace(wordobject.name, link); 
 
     } 
 
     }); 
 
     $('dd').html(function() { 
 
     if ($(this).parent().attr('class') !== 'glossary-no-replace') { 
 
      return $(this).html().replace(wordobject.name, link); 
 
     } 
 
     }); 
 

 
    }); 
 

 
    } 
 

 
    var glossary_entries = null; 
 
    var $glossaryElement = $('#glossary-element'); 
 

 
    glossary_entries = $glossaryElement.data('elements'); 
 
    var current_glossary_language = null; 
 
    current_glossary_language = $glossaryElement.data('language'); 
 

 
    if (glossary_entries !== null) { 
 
    $glossaryElement.remove(); 
 
    replaceWordsWithLinks(glossary_entries, current_glossary_language); 
 
    } 
 
    
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
body { 
 
    padding: 50px; 
 
} 
 

 
p { 
 
    max-width: 700px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    font: normal 18px/1.5 serif; 
 
} 
 
p + p { 
 
    margin-top: 30px; 
 
} 
 

 
.link { 
 
    color: #bf6a40; 
 
} 
 
.link:hover { 
 
    color: #40bf80; 
 
} 
 

 
.link--glossary { 
 
    cursor: help; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<p>lorem dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p> 
 
<p>lorem dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p> 
 
<p>lorem dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p> 
 
<div><div class="hidden" id="glossary-element" data-elements='{"1":{"name":"ipsum","link_id":1007},"2":{"name":"lorem","link_id":1006},"3":{"name":"amet","link_id":1005},"4":{"name":"sea","link_id":1005},"5":{"name":"takimata sanctus","link_id":1005}}'></div></div>

Answer 1

我願意:contains選擇器相匹配的每個標籤過濾下來。如果您在標籤中找到匹配項，則忽略其他標籤。然後使用first()隔離匹配集合

喜歡的東西的第一個實例：

var $el; 

var $pHasWord = 
    $('p').not('.glossary-no-replace') 
     .filter(':contains(' + wordobject.name + ')');  

if ($pHasWord.length) { 
    $el = $pHasWord; 

} else { 

    var $spanHasWord = 
    $('span').not('.glossary-no-replace, .breadcrumb span') 
      .filter(':contains(' + wordobject.name + ')'); 

    if ($spanHasWord.length) { 
    $el = $spanHasWord; 
    } else { 

    $el = 
     $('dd').not('.glossary-no-replace dd') 
      .filter(':contains(' + wordobject.name + ')'); 
    } 
} 

if ($el) { 
    $el.first().html(function(_, existHtml) { 
    return existHtml.replace(wordobject.name, link); 
    }); 
}