CODEWITHSUNDEEP
javascriptjqueryhtml
dk_french032
dk_french032

Reputation: 648

Add html to all content before a certain character

Okay, this is a real shot in the dark and not too sure if I phrased my title correctly but what i'm trying to do is as follows:

I have an html table that looks like this

<table>
   <tr>
      <td>Type: Tanker </td>
      <td>DWT: 8672.82 </td>
   </tr>
   <tr>
      <td>Flag: Gibraltar</td>
      <td>Pumping Capacity: 12 Cargos pumps each 200m3/h </td>
   </tr>
</table>

What I want to do is wrap all content "headers" in a strong before the ":" in a dynamically so the table looks as follows 

<table>
   <tr>
      <td><strong>Type:</strong> Tanker </td>
      <td><strong>DWT:</strong> 8672.82 </td>
   </tr>
   <tr>
      <td><strong>Flag:</strong> Gibraltar</td>
      <td><strong>Pumping Capacity:</strong> 12 Cargos pumps each 200m3/h </td>
   </tr>
</table>

I understand that i could achieve this easily by adding two more columns to the table and using css :first-child and nth-child selectors but this is not the way I want to go about doing this due to size / layout constraints.

Upvotes: 2

Views: 55

Answers (2)

versvs
versvs

Reputation: 643

Maybe you should take a look to definition lists

http://www.w3schools.com/tags/tag_dl.asp

They seem to be semantically appropiate for your type of table, and by providing separate HTML tags for the term and definition fields (type, tanker; dwt, number; etc.) will help you define CSS styles easily.

A possible new HTML structure may be:

<dl>
    <dt>Type</dt>
    <dd>Tanker</dd>
    <dt>DWT</dt>
    <dd>8672.82</dd>
    ...
</dl>

Note: I didn't put the :, you can add them using the :after meta-selector in CSS. Again, in css you may indicate that all dt tags be rendered in bold fonts.

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382314

You can do it easily like this :

$('td').html(function(_,h){
    return h.replace(/([^:]+):/, '<strong>$1:</strong>')
});

Demonstration

Upvotes: 4

Related Questions