0

I have the following instance of html:

<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span>

There are other instances of the same markup except the contents are things like "Conference Room, Conference Room, Conference Room" etc.

I basically only want to display "12 hours" and "Conference Room" etc and hide everything after the first comma. Whether I achieve this via wrapping the first comma and everything after it with a span I then hide or replacing the html contents doesn't really matter.

Thank you

GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
Nick Hunt
  • 3
  • 2
  • Just search for substring. Or make it properly and fix the original code that does something like this.Seems like a bad design to me. – user5014677 Sep 14 '17 at 12:03

5 Answers5

0

Try using split()

$('.booking-detail b').each(function (idx, elem){

    var $elem = $(elem);
    $elem.text($elem.text().split(',')[0])'

});
ste-fu
  • 6,879
  • 3
  • 27
  • 46
0

Loop the items, split the text on commas, and add it back to the element.

$('.booking-detail b').each( function() {
  var text = $(this).html(); /* get the text */
  var textParts = text.split(','); /* split on the comma */
  $(this).html(textParts[0]); /* insert first array part */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>

For dynamic content (based on comments)

$('.booking-detail').each( function() {
  var b = $(this).find('b');
  var text = b.html(); /* get the text */
  var textParts = text.split(','); /* split on the comma */
  b.html(textParts[0]); /* insert first array part */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>

Alternative without .each

$('.booking-detail b').html( function(i,text) {
  return(text.split(',').splice(0,1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>14 hours, 12 hours, 12 hours</b></span><br />
<span class="booking-detail"><b>15 hours, 12 hours, 12 hours</b></span>
Community
  • 1
  • 1
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59
  • Thank you @LinkinTED!!! I've just discovered that the content is not in the DOM and is ajax'd in or something and therefore this code works when the content is part of the HTML markup but for the system I'm using it can't find it as the content is ajaxed in. Thanks for your prompt help though! – Nick Hunt Sep 14 '17 at 12:23
  • How do I bind your script to the ajaxed content? – Nick Hunt Sep 14 '17 at 12:32
  • Then you should bind it on the parent that is in the DOM https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – GreyRoofPigeon Sep 14 '17 at 12:43
  • Thank you. So .bookly-form already exists. Is this fine: $('.bookly-form').on('load', '.booking-detail b', function(){ $('.booking-detail b').each( function() { var text = $(this).html(); /* get the text */ var textParts = text.split(','); /* split on the comma */ $(this).html(textParts[0]); /* insert first array part */ }); }); – Nick Hunt Sep 14 '17 at 12:54
  • Check the EDIT, should work. I also added an alternative – GreyRoofPigeon Sep 14 '17 at 13:01
0

You can look for a substring inside your string like:

var d = "12 hours, 12 hours, 12 hours";
alert(d.substring(0, d.indexOf(","));
// shows "12 hours"
anteAdamovic
  • 1,462
  • 12
  • 23
0

var a = $('b').text().split(',');
$('b').text(a[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><b>12 hours,12 hours, 12 hours</b></span>
Bhanu Tharun
  • 134
  • 2
  • 14
0

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.booking-detail b').each( function() {
  var text = $(this).html();   var textParts = text.split(',');   $(this).html(textParts[0]);
});
</script
</head>
<body>
<span class="booking-detail"><b>12 hours, 12 hours, 12 hours</b></span>
</body>
</html>

Hope this will works for you ! thanks

Unknown_Coder
  • 764
  • 6
  • 24