使用CSS或jQuery将HTML中的匹配字符串与标题分开

Question

我正在做一个项目，它需要将字符串与列出的所有标题分离。标题超过500，所以很难改变它。

医生名单

​

<div class="dr-title"><h2>Dr. Nicki Mallmann CRM 22768</h2></div>
<div class="dr-title"><h2>Dr. Alexandre Manoel Varela CRM 10113</h2></div>
<div class="dr-title"><h2>Dr. Arnaldo Laffitte Stier Junior CRM 9475</h2></div>
<div class="dr-title"><h2>Dr. Claudinei Colatusso CRM 19994</h2></div>

​

所有这些都封装在h2元素中的HTML中。

是否有任何可能性，我们可以把文本从CRM开始，并有其独特的编号？

它现在的样子就在上面。我想要的是下面

​

.dr-crm {
  display: block;
  font-size: 12px;
  }

<div class="dr-title"><h2>Dr. Nicki Mallmann <span class="dr-crm">CRM 22768</span></h2></div>
<div class="dr-title"><h2>Dr. Alexandre Manoel Varela <span class="dr-crm">CRM 10113</span></h2></div>
<div class="dr-title"><h2>Dr. Arnaldo Laffitte Stier Junior <span class="dr-crm">CRM 9475</span></h2></div>
<div class="dr-title"><h2>Dr. Claudinei Colatusso <span class="dr-crm">CRM 19994</span></h2></div>

​

可以使用CSS或jQuery吗？我试着用css伪选择器寻找一些东西，但不可能。可能和jQuery在一起，我认为这是可能的。

Answer 1

CSS功能不够强大，无法按您的要求修改内容。

相反，您可以使用Javascript向replace()方法提供一个正则表达式来实现这一点，该方法查找CRM值和任何以下字符，并将它们包装在span中。试试这个：

​

$('h2').html(function(i, h) {
  return h.replace(/(CRM.*$)/, '<span class="dr-crm">$1</span>');
});

.dr-crm { 
    display: block;
    font-size: 12px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dr-title">
  <h2>Dr. Nicki Mallmann CRM 22768</h2>
</div>
<div class="dr-title">
  <h2>Dr. Alexandre Manoel Varela CRM 10113</h2>
</div>
<div class="dr-title">
  <h2>Dr. Arnaldo Laffitte Stier Junior CRM 9475</h2>
</div>
<div class="dr-title">
  <h2>Dr. Claudinei Colatusso CRM 19994</h2>
</div>

​