时间戳

首页 > 解决方案 > jQuery - 使用正则表达式使链接中的模式变为粗体

javascript - jQuery - 使用正则表达式使链接中的模式变为粗体

问题描述

我有一个日期列表，我尝试使用 jQuery 和正则表达式将链接中的每个日期设为粗体。这是我到目前为止得到的：

$date = '/([0-2][0][0-9][0-9]).([0-1][0-9]).([0-3][0-9])/gi';

$('a:contains('+$date+')').css('font-weight','600');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="#">2018.03.08 Event #1</a>
  </li>
  <li>
    <a href="#">2018.02.12 Event #2</a>
  </li>
  <li>
    <a href="#">2017.12.04 Event #3</a>
  </li>
</ul>

我的代码有什么问题？有一个更好的方法吗？

我是 JS/jQuery 的菜鸟，非常感谢您的帮助！

标签： javascriptjqueryhtml

解决方案

首先，解决问题：

// a date-pattern regular expression literal:
let datePattern = /([0-2][0-9]{3,3}\.[0-1][0-9]\.[0-3][0-9])/gi;

// select all <a> elements,
// and iterate over the returned collection with the
// .html() method:
$('a').html(function() {

  // here we return the modified string of text,
  // wrapping any patterns matching the date pattern,
  // with the '<b>' and '</b>' tags; as this text is
  // returned to the HTML method this is parsed as
  // HTML:
  return this.textContent.replace(datePattern, '<b>$1</b>');
});


let datePattern = /([0-2][0-9]{3,3}\.[0-1][0-9]\.[0-3][0-9])/gi;

$('a').html(function() {
  return this.textContent.replace(datePattern, '<b>$1</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="#">2018.03.08 Event #1</a>
  </li>
  <li>
    <a href="#">2018.02.12 Event #2</a>
  </li>
  <li>
    <a href="#">2017.12.04 Event #3</a>
  </li>
</ul>

还值得注意的是，虽然 jQuery 可以——而且确实——让一些事情变得更容易，但上面的内容对于纯 JavaScript 来说很简单：

let datePattern = /([0-2][0-9]{3,3}\.[0-1][0-9]\.[0-3][0-9])/gi;

// converting the result of the contained expression
// into an Array, in order to gain access to Array methods:
Array.from(

  // retrieving all <a> elements from the document:
  document.querySelectorAll('a')

// using Array.prototype.forEach() to iterate over
// the Array of <a> elements:
).forEach(function(aElement) {
  // 'aElement' refers to the current <a> element
  // of the Array of <a> elements.

  // here we update the innerHTML of the current <a> element
  // to be equal to the text of the current <a> element, after
  // wrapping any date-patterns - as before - with the '<b>'
  // and '</b>' tags:
  aElement.innerHTML = aElement.textContent.replace(datePattern, '<b>$1</b>');
});


let datePattern = /([0-2][0-9]{3,3}\.[0-1][0-9]\.[0-3][0-9])/gi;

Array.from(
  document.querySelectorAll('a')
).forEach(function(aElement) {
  aElement.innerHTML = aElement.textContent.replace(datePattern, '<b>$1</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="#">2018.03.08 Event #1</a>
  </li>
  <li>
    <a href="#">2018.02.12 Event #2</a>
  </li>
  <li>
    <a href="#">2017.12.04 Event #3</a>
  </li>
</ul>

现在解决问题：

$date = '/([0-2][0][0-9][0-9]).([0-1][0-9]).([0-3][0-9])/gi';

在这里，您声明了一个全局变量（不好的做法，因为该全局变量可以在其他地方不可预测地使用/覆盖）。此外，正则表达式被包裹在一个字符串文字中，这意味着正则表达式是一个字符串，而不是一个正则表达式。

此外:contains()，正如文档中明确指出的那样，选择器仅适用于字符串。

<a>因此，在您的原始代码中，您有一个字符串（看起来像一个正则表达式），它正在任何元素中被搜索，但从未找到。

此外，如果发现您的css()方法调用的最终结果是将<a>元素本身包装在一个<b>元素中，而不是包装日期字符串。我认为这是你的计划。

参考：

推荐阅读