How can I hidden specific text in div using specific separator using jquery[Answered] RSS

• • Reply
  progy85

  Member

  65 Points

  194 Posts

  How can I hidden specific text in div using specific separator using jquery

  Mar 10, 2020 10:05 PM|progy85|LINK

  <div>Hello,</div> <div> </div> <div>I have my text in div: test1(desc1,desc2,desc3)-test2(desc1,desc2)-test3</div> <div> </div> <div>With checkbox If I have checked I need hidden all text from brackets, only need to show test1-test2-test.</div> <div>If I don't have chedked need to display all texts.</div>
• • Reply
  mgebhard

  All-Star

  53021 Points

  23607 Posts

  Re: How can I hidden specific text in div using specific separator using jquery

  Mar 11, 2020 12:05 AM|mgebhard|LINK

  progy85

  <div>Hello,</div> <div></div> <div>I have my text in div: test1(desc1,desc2,desc3)-test2(desc1,desc2)-test3</div> <div></div> <div>With checkbox If I have checked I need hidden all text from brackets, only need to show test1-test2-test.</div> <div>If I don't have chedked need to display all texts.</div>

  Your question is very difficult to understand.  My best guess is you want to update the UI by toggling the display.  Below is a basic pattern using standard HTML and basic jQuery selectors.

      <div>
          <span class="test">test1</span>
          <span class="bracket">(desc1,desc2,desc3)</span>
          <span class="test">-test2</span>
          <span class="bracket">(desc1,desc2)</span>
          <span class="test">-test3</span>
      </div>
      <div>
          <input id="Checkbox1" type="checkbox" />
      </div>
  
  
  

      <script>
          $('#Checkbox1').change(function () {
              if ($('#Checkbox1').prop('checked')) {
                  $('.bracket').hide();
              }
              else {
                  $('.bracket').show();
              }
          });
      </script>

• • Reply
  Sean Fang

  Contributor

  2840 Points

  840 Posts

  Re: How can I hidden specific text in div using specific separator using jquery

  Mar 11, 2020 06:43 AM|Sean Fang|LINK

  Hi, progy85,

  If your purpose is using Regular expression to complete it, then it might be a bit complex since you have to deal with the string with a specific format.

  The advantage of using Regex is that you don't need to change the HTML when the value varies as long as the format of the values keeps the same.

   

  More details, you can refer to below code:

  Script:

  <script type="text/javascript">
          $(document).ready(function () {
  
              $('#Checkbox1').change(function () {
                  // If check box is checked, fetch the values in parentheses and store them in a hidden field
                  if ($(this).is(":checked")) {
                      //original value array
                      var originalContentArray = $('div label').text().trim().split('-');
                      //array which is used to store the values in parentheses: for example, (desc1,desc2,desc3)
                      var storeArray = [];
                      //array which is used to store the new content: for example, test1
                      var newContentArray = [];
  
                      originalContentArray.forEach(function (s) {
                          // Regex explanation:
                          // '\('- being opening brace
                          // '(' - start of subexpression
                          // '[^)]+' — anything but closing parenthesis one or more times
                          // ')'  — end of subexpression
                          // '\)' — closing brace
                          var descPart = s.match(/\(([^)]+)\)/);
                          var testPart = s.replace(/\(([^)]+)\)/, '');
  
                          
                          if (descPart == null) {
                              descPart = "";
                          } else {
                              descPart = descPart[0];
                          }
  
                          storeArray.push(descPart);
                          newContentArray.push(testPart);
                      })
  
                      //Change the html value
                      $('#storeValueInParentheses').val(JSON.stringify(storeArray));
                      $('div label').text(newContentArray.join('-'));
                      
                  } else {
                      // Restore the value from the hidden field
                      var storeArray = JSON.parse($('#storeValueInParentheses').val());
                      var newContentArray = $('div label').text().trim().split('-');
  
                      //Array to store the restored value: for example, test1(desc1,desc2,desc3)
                      var restoreContentArray = [];
  
                      // The length of newContentArray is the same as that of storeArray
                      var i;
                      for (i = 0; i < newContentArray.length; i++) {
                          var restorePart = newContentArray[i] + storeArray[i];
                          restoreContentArray.push(restorePart);
                      }
  
                      //Change the html value
                      $('#storeValueInParentheses').val('');
                      $('div label').text(restoreContentArray.join('-'));
                  }
              });
          });
      </script>

  HTML:

   <div>
              <div>
                  <label>test1(desc1,desc2,desc3)-test2(desc1,desc2)-test3</label>
              </div>
              <div>
                  <input type="hidden" id="storeValueInParentheses" />
              </div>
              <div>
                  <input id="Checkbox1" type="checkbox" />
              </div>
          </div>

  Demo:

  

  Hope this can help you.

  Best regards,

  Sean

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.