Get selected text from a drop-down list but remove numeric value using jQuery

Question

I'm using a Bootstrap dropdown menu and jQuery to change the default <span class="selected">All</span> with the dropdown list item a user selects. However, I want to only show the text of the selected item, NOT the numeric item count associated with each item.

IE: If I select:
<a href="#dropdowns">Sample Text A <span class="badge">3</span></a> from the list, I only want "Sample Text A" to appear in place of the default "All" text within: <span class="selected">All</span>

// TOGGLE Dropdown Selection
    $(document).ready(function(){
	    $('.dropdown-menu a').click(function(){
        $('.selected').text($(this).text());
      });
    });

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<div class="dropdown"><br />
        <button class="btn-lg btn-default-outline dropdown-toggle" type="button" data-toggle="dropdown"><br />
            <span class="selected">All</span>
		    <span class="pull-right fa fa-chevron-down"></span>
	    </button>
        <ul class="dropdown-menu">
	        <li class="dropdown-item">
                <a href="#dropdowns">All <span class="badge">43</span></a>
		    </li>
		    <li class="dropdown-item">
               <a href="#dropdowns">Sample Text A <span class="badge">3</span></a>
		    </li>
            <li class="dropdown-item">
                <a href="#dropdowns">Sample Text B <span class="badge">30</span></a>
		    </li>
            <li class="dropdown-item">
                <a href="#dropdowns">Sample Text C <span class="badge">10</span></a>
		    </li>
            <li class="dropdown-item">
                <a href="#dropdowns">Sample Text D <span class="badge">40</span></a>
		    </li>
        </ul>
    </div>

Answer 1

You can use Regular expressions and String.prototype.replace() to replace by '' the text in the .badge span element:

$('.dropdown a').click(function(){
  var $li = $(this);
  var badgeText = $li.find('.badge').text();
  var liText = $li.text().replace(new RegExp(badgeText),'');
  
  $('.selected').text(liText);
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="dropdown">
   <br />
   <button class="btn-lg btn-default-outline dropdown-toggle" type="button" data-toggle="dropdown"><br />
   <span class="selected">All</span>
   <span class="pull-right fa fa-chevron-down"></span>
   </button>
   <ul class="view dropdown-menu">
      <li class="dropdown-item">
         <a href="#dropdowns">All <span class="badge">43</span></a>
      </li>
      <li class="dropdown-item">
         <a href="#dropdowns">Sample Text A <span class="badge">3</span></a>
      </li>
      <li class="dropdown-item">
         <a href="#dropdowns">Sample Text B <span class="badge">30</span></a>
      </li>
      <li class="dropdown-item">
         <a href="#dropdowns">Sample Text C <span class="badge">10</span></a>
      </li>
      <li class="dropdown-item">
         <a href="#dropdowns">Sample Text D <span class="badge">40</span></a>
      </li>
   </ul>
</div>