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

Question

User932259438 posted

Hello,

 

I have my text in div: test1(desc1,desc2,desc3)-test2(desc1,desc2)-test3

 

With checkbox If I have checked I need hidden all text from brackets, only need to show test1-test2-test.

If I don't have chedked need to display all texts.

Answer 1

User475983607 posted

Hello,

I have my text in div: test1(desc1,desc2,desc3)-test2(desc1,desc2)-test3

With checkbox If I have checked I need hidden all text from brackets, only need to show test1-test2-test.

If I don't have chedked need to display all texts.

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>

Answer 2

User-1330468790 posted

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