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

Question

I am working on a project which requires a separation of strings from all the titles listed. Titles are more than 500 so its difficult to change it.

The list of doctors

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

All those are wrapped in HTML within h2 elements.

Are there any possibilities that we can separate the texts starting from CRM followed with its unique number?

What currently it looks like is above. What I want is below

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

Is it possible with CSS or jQuery? I tried looking for something with css pseudo selectors but not possible. Might be with jQuery I think its possible.

Answer 1

CSS is not powerful enough to amend the content as you require in this case.

Instead, you can achieve this using Javascript by providing a regular expression to the replace() method which finds the CRM value and any following characters, and wraps them in a span . Try this:

 $('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>