I need to make text bold inside elements with class="descTD" up to the first forward slash (/) like so:

before slash / after slash

the text is inside td:

 <td class="descTD">My text / is this</td>

I'm a javascript jQuery newbe. Any help would be much appreciated

I need to make text bold inside elements with class="descTD" up to the first forward slash (/) like so:

before slash / after slash

the text is inside td:

 <td class="descTD">My text / is this</td>

I'm a javascript jQuery newbe. Any help would be much appreciated

• javascript
• jquery

Share Improve this question Follow edited Mar 15, 2012 at 23:05 boruchsiper asked Mar 15, 2012 at 22:36 boruchsiperboruchsiper 2,0381010 gold badges3131 silver badges5757 bronze badges 2

• is your text wrapped with some div,span,a etc? – Taha Paksu Commented Mar 15, 2012 at 22:38
• yes, <td class="descTD">My text / is this</td>. Just added that to the question. thanks – boruchsiper Commented Mar 15, 2012 at 22:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

you can use something like this :

    if($("#textme").text().indexOf("/")>0){
        var t=$("#textme").text();
        $("#textme").html("<b>" + t.substring(0,t.indexOf('/')-1) + "</b>" +     t.substring(t.indexOf('/')));
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textme">before slash / after slash</div>

JS --

//get the text to manipulate
var str = $('#element').text(),

    //get the position of the first forward slash
    pos = str.indexOf('/');

//set the HTML of the element to include a span that has a class to alter the display of the text
//(just for what's before the first forward slash)
$('#element').html('<span class="bold">' + str.substr(0, pos) + '</span>' + str.substr(pos));​

CSS --

.bold {
    font-weight : bold;
}​

Here is a demo: http://jsfiddle/Vx4fL/

Something like this will do it

DEMO : http://jsfiddle/Eh2ym/

$(selector).html(function(i, old){
   var htm= old.split('/'); 
  return '<strong>'+ htm[0] +'</strong>'+htm[1];    
 })

​

Assuming you are getting the value inside of some tag (span, div, etc)

var bolded = $("#my_selector").text().replace(/$(.*?)\/(.*)/,"<strong>$1</strong>/$2");

The regular expresion says match from the beginning up to the first / and store that in capture group 1, match the rest and put in capture group 2, then build a string that wraps the value in group 1 with <strong> and </strong> and tack the / and the rest back on.

I forget how jQuery lets you change the content, but I think it's

$("my_selector").text(bolded);