Question

我有一个带有日期的列表，我尝试使用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的新手，非常感谢您的帮助！

Answer 1

首先，解决该问题：

// 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>元素中，而不是包装日期字符串。我认为这是您的计划。

参考文献：

JavaScript：
- Array.prototype.forEach()。
- Array.from()。
- document.querySelectorAll()。
- JavaScript regular expressions。
- String.prototype.replace()。
jQuery：
- :contains()。
- .html()。

Answer 2

由于您使用的是jQuery，因此有一种针对它的解决方案：

var pattern = /([0-2][0][0-9][0-9])\.([0-1][0-9])\.([0-3][0-9])/;

// select each `a` element
$('a').each(function () {  
  // store individual `a` elements
  var elem = $(this);  
  // replace the text (date in your case) using the regex pattern and  
  // set the content of the `a` element with the new, formatted date
  elem.html(elem.text().replace(pattern, function (date) {
    // here you can apply your various inline styles
    return '<span style="font-weight: 600">' + date + '</span>';
  }));
});

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

在您的情况下，您不需要在正则表达式中使用i修饰符，因为您的正则表达式模式不需要处理区分大小写的字符，只需要数字即可。

此外，您也不需要g修饰符，根据您的示例，您只需匹配一次模式即可。

Answer 3

简单而好的解决方案：

var regex = new RegExp("[0-9]"); // expression here

$("a").filter(function () {
    return regex.test($(this).text()); 
}).css('font-weight','100');

jQuery-使用正则表达式在链接粗体中制作模式

3 个答案: