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

仅替换第一个出现的单词

1 个答案: