使用jQuery替换引力表单管理中字符串“表单”的所有实例

Question

I've been asked that I change all instances of the word "form" to "block" as part of a WordPress app we are working on. The replacement needs to happened throughout gravity forms admin section. Because gravity forms does not have an easy way to change this without editing the plugin I've opted to use jQuery to replace all instance on dom load.

The issue I'm facing however is that Gravity Forms dynamically places inline javascript into the body of the html. Inline /w the displayed pages content. So when I run say for instance:

jQuery("#wpbody-content").html(jQuery("#wpbody-content").html().replace(/Form/gi, 'Block'));

It ends up replacing important instance of the word "form" inside of those inline javascript inserts (which are used to create a new form using ajax for example).

I was wondering if anyone had any ideas how I might do a replace of all instances of the word "form" that is actually html and not part of any inline javascript?

I'm trying to get this:

<div class="#wpbody-content">
    <div class="setting-row">
        <label for="new_form_description">Form Description</label><br>
        <textarea class="regular-text" id="new_form_description" tabindex="9001"></textarea>
    </div>

    <script type="text/javascript">

            jQuery(document).ready(function($) {

                 loadNewFormModal();

                function loadNewFormModal() {
                    resetNewFormModal();
                    tb_show('Create a New Form', '#TB_inline?width=375&amp;inlineId=gf_new_form_modal');
                    jQuery('#new_form_title').focus();
                    return false;
                }

            }

    </script>
</div>

to become this:

<div class="#wpbody-content">
    <div class="setting-row">
        <label for="new_form_description">Module Description</label><br>
        <textarea class="regular-text" id="new_form_description" tabindex="9001"></textarea>

    </div>

    <script type="text/javascript">

            jQuery(document).ready(function($) {

                 loadNewFormModal();

                function loadNewFormModal() {
                    resetNewFormModal();
                    tb_show('Create a New Form', '#TB_inline?width=375&amp;inlineId=gf_new_form_modal');
                    jQuery('#new_form_title').focus();
                    return false;
                }

            }

    </script>
</div>

and not this:

<div class="#wpbody-content">
    <div class="setting-row">
        <label for="new_Block_description">Block Description</label><br>
        <textarea class="regular-text" id="new_Block_description" tabindex="9001"></textarea>
    </div>

    <script type="text/javascript">

            jQuery(document).ready(function($) {

                 loadNewBlockModal();

                function loadNewBlockModal() {
                    resetNewBlockModal();
                    tb_show('Create a New Block', '#TB_inline?width=375&amp;inlineId=gf_new_Block_modal');
                    jQuery('#new_Block_title').focus();
                    return false;
                }

            }

    </script>
</div>

Answer 1

You can do the following:

• Search all content for the desired word (Form)
• Check if the that word parent is not SCRIPT
• Modify the content of that tag with the replaced word

jsfiddle DEMO

$(function(){
    $('*:contains("Form")').each(function(){
        if($(this).children().length < 1){
            if($(this).prop("tagName") != "SCRIPT"){
                //$(this).html().replace(/Form/gi, 'Block');
                $(this).html($(this).html().replace(/Form/gi,"Block" ));
            }
        }
    });
});