只替换第一次出现的单词

debugcn 发表于 Dev

痣

我有一个单词列表。如果文档中出现这些词之一，则匹配需要替换为链接。到目前为止，我已经完成了这项工作，但脚本替换了所有出现的情况。当第一个单词被替换并继续下一个词时，我如何通过停止循环来防止这种情况？

编辑：将代码嵌入到一个片段中：

$(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>

查理特

我会过滤掉与: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);
  });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。