javascript - 使用 jQuery 突出显示内容中的年份

Question

使用 jQuery 我想突出显示字符串中的年份。

我有一个简单的元素列表。我想用 span

将年份包装在一个字符串中

function getyear(val) {
  return /\d{4}/.test(val) ? val.replace(/^[^\d]*(\d{4}).*$/, '$1') : 'Now';
}

$(document).ready(function() {
  jQuery("li").each(function(i, v) {
    $('li').append((i + 1) + ':\t' + getyear(v) + '\n');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <ul>
    <li>Manufacturer by 332 ZX 8985 Jimba 2017</li>
    <li>Manufacturer by 22T736 Jimba 2017</li>
    <li>Manufacturer by jackson T736 hub 2017-1958 </li>
    <li>Manufacturer by Jimba Dummasa corey 2017</li>
    <li>Manufacturer by Jimba corey TCGH1922 2017</li>
  </ul>

</div>

需要的输出:

<div class="content">
    <ul>
        <li>Manufacturer by 332 ZX 8985 Jimba <span>2017</span></li>
        <li>Manufacturer by 22T736 Jimba <span>2017</span></li>
        <li>Manufacturer by jackson T736 hub <span>2017-1953</span> </li>
        <li>Manufacturer by Jimba Dummasa corey <span>2017</span></li>
        <li>Manufacturer by Jimba corey TCGH1922 <span>2000</span></li>
    </ul>

</div>

但它不起作用。

Answer 1

您正在使用的 regex 仅适用于日期字符串，不适用于从文本中提取年份 请参阅下面的解决方案，假设 YEAR 始终位于以字符串结尾并以 4 位数字格式表示。我已经提取了年份，希望您现在可以将其包装在 span 中。

function getyear(node) {
  let val = node.text().trim();
  let newspan = '';
  let newNode = '';

  let numbersOnly = val.replace(/[^0-9\-]+/g, '|')
  let numberArr = numbersOnly.split('|');
  numberArr = numberArr.clean("");

  numberArr.forEach(function(v) {
    //console.log(v.match(/^\d{4}$/));
    if (v.length == 4 || v.length == 9) {
      val = val.replace(v, "<span class='my-label'>" + v + "</span>");
    }
  });
  return val;
}

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

$(document).ready(function() {
  $("#mark").click(function() {
    jQuery("li").each(function(i, v) {
      //$('li').append((i + 1) + ':\t' + getyear(v) + '\n');
      //getyear($(this));
      $(this).html(getyear($(this)));
    });
  });

});

/*previously used solution if year appear only in the end of string*/
function getyearOLD(node) {
  let val = node.text().trim();
  let newspan = '';
  let newNode = '';
  if (val.charAt(val.length - 5) == '-') {
    newspan = ' <span class="my-label">' + val.substr(val.length - 9) + '</span>';
    newNode = val.substr(0, val.length - 9) + newspan;
  } else {

    newspan = ' <span class="my-label">' + val.substr(val.length - 4) + '</span>';
    newNode = val.substr(0, val.length - 9) + newspan;
  }
  //return val.substr(val.length - 4);
  //node.text(newNode);
  return newNode;

}

.my-label {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <ul>
    <li>Manufacturer by 332 ZX 8985 Jimba 2017</li>
    <li>Manufacturer by 22T736 Jimba 2017</li>
    <li>Manufacturer by jackson T736 hub 2017-1958 </li>
    <li>Manufacturer by Jimba Dummasa corey 2017</li>
    <li>Manufacturer by Jimba corey TCGH1922 2017</li>
  </ul>

</div>

<input type="button" value="mark years" id="mark" />