只替换第一个字出现

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