Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Find and Replace HTML

    I am using a CMS, so there are blocks of content that I cannot change. What I would like to do is attach an id to a table that is printed by the CMS. Is it possible to use javascript to search for code, then replace it with different code? I use this function in dreamweaver all the time, but in javascript, I am not sure how.

  • #2
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is there a general find and replace function in javascript?

  • #3
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    You can use replace method on a given string...utilizing regular expressions for pattern matching etc.

    here is a simple example
    http://www.w3schools.com/jsref/jsref_replace.asp

  • #4
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The problem with that method is that it seems that it does not replace HTML, just strings within the javascript, I need to find and replace HTML in a document.

  • #5
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    it does replace html tags.

    Here is an example

    var str = "<strong>Hello World</strong>";
    // replace all strong tags
    str = str.replace( /<strong>[\n]*/gi, "<b>" );
    str = str.replace( /<\/strong>[\n]*/gi, "</b>" );

    The variable str could have been a reference to <body> tag of a html document.

  • #6
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ah, I see!

    I just get confused with /<\/strong>[\n]*/gi, "</b> because I am unsure when I need to escape characters, and why I would not just type the code normally.

  • #7
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I want to search for:

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="sq-backend-data" style="white-space: nowrap">
    <input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled"
    And replace it with:

    <table id="remove" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="sq-backend-data" style="white-space: nowrap">
    <input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled"

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by hubbni View Post
    I just get confused with /<\/strong>[\n]*/gi, "</b> because I am unsure when I need to escape characters, and why I would not just type the code normally.
    You may want to do some research on regular expressions. Characters that have special functionality need to be escaped. For example, the Solidus (/) character normally closes the main portion of the regular expression and, thus, must be escaped.

    Quote Originally Posted by hubbni View Post
    I want to search for:

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="sq-backend-data" style="white-space: nowrap">
    <input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled"
    And replace it with:

    <table id="remove" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="sq-backend-data" style="white-space: nowrap">
    <input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled"
    Use [code] tags to mark up your code.

    You could use the DOM to accomplish what you ask. Below is an example

    Code:
    document.getElementById("calendar_event_single_0_end_enabled").parentNode.parentNode.parentNode.parentNode.setAttribute("id", "remove");
    The first parent node is the table cell element, the second is the table row element, the third is the table body element, and the fourth is the table element. If using HTML (or XHTML served as HTML instead of XML), then there should be an invisible tbody element if you fail to add it explicitly. (In HTML, tbody is one of the four elements where the start tag is optional; in other words, it will always be present for tables that do not explicitly put all cells within thead, tfoot, or tbody elements. To avoid confusion, you should always explicitly declare those elements.)

    Regarding the quality of your code, the presentational border, cellspacing, cellpadding, and style attributes should really be replaced with equivalent CSS in an embedded (style element) or external (CSS file) style sheet.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the help.

    So, this will still work even though the <table> does not currently have an id? It does not seem to be working...

    Code:
    document.getElementById("calendar_event_single_0_end_enabled").parentNode.parentNode.parentNode.parentNode.setAttribute("id", "remove");
    Last edited by hubbni; 07-12-2007 at 09:04 PM.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by hubbni View Post
    So, this will still work even though the <table> does not currently have an id? It does not seem to be working...
    Yes. The code should work regardless; the setAttribute method does not require that an attribute exist prior to setting it.

    Perhaps you can show us your current code?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is the code that gets printed by my CMS. (The table, with its content gets printed and I cannot changed the content, that is why I am wanting to attatch an id to the table, so I can hide it with CSS)

    Code:
    <script type="text/javascript">
    document.getElementById("calendar_event_single_0_end_enabled").parentNode.parentNode.parentNode.parentNode.setAttribute("id", "remove");
    </script>
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="sq-backend-data" style="white-space: nowrap"><input name="calendar_event_single_0_end_enabled" id="calendar_event_single_0_end_enabled" type="checkbox"  onclick="processEndClick(this, 'calendar_event_single_0');"/>
              &nbsp;runs&nbsp; </td>
            <!-- duration -->
            <td class="sq-backend-data" style="white-space: nowrap"><input type="radio" value="duration" id="calendar_event_single_0_duration_enabled" name="calendar_event_single_0_end_type" checked="checked" disabled="disabled" />
              for </td>
            <td colspan="2" class="sq-backend-data" style="white-space: nowrap"><input type="text" name="calendar_event_single_0_duration" value="" size="2" onclick="checkBox('calendar_event_single_0_duration_enabled'); checkBox('calendar_event_single_0_start_time_enabled'); enableTimeField('calendar_event_single_0_start');"  onblur="updateDurationValues('calendar_event_single_0')" disabled="disabled" class="sq-form-field" id="calendar_event_single_0_duration" />
              <select name="calendar_event_single_0_duration_units" onclick="checkBox('calendar_event_single_0_duration_enabled'); checkBox('calendar_event_single_0_start_time_enabled'); enableTimeField('calendar_event_single_0_start');" onblur="updateDurationValues('calendar_event_single_0')" disabled="disabled" class="sq-form-field" id="calendar_event_single_0_duration_units">
                <option value="i" selected="selected">minutes</option>
                <option value="h">hours</option>
                <option value="d">days</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <!-- end date -->
            <td class="sq-backend-data" style="white-space: nowrap"><input type="radio"   value="date" id="calendar_event_single_0_end_date_enabled" name="calendar_event_single_0_end_type" disabled="disabled"  />
              until &nbsp; </td>
            <td class="sq-backend-data" style="white-space: nowrap">
            </td>
          </tr>
        </table>

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by hubbni View Post
    This is the code that gets printed by my CMS. (The table, with its content gets printed and I cannot changed the content, that is why I am wanting to attatch an id to the table, so I can hide it with CSS)
    I hope that thatís not all of your code. Key parts of the document are missing, such as the document type declaration and the required title element.

    If thatís all of your code, the script isnít going to do anything because the table doesnít exist at the point when the browser reads the script. You either need to fire the script during the (on)load event or put the script after the table.

    If thatís all of your code, bugs are more likely too, since, without a document type declaration, your page will be displayed in Quirks Mode.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No, no, no. That is definetly not all of my code. But the whole page is heavily laiden with javascript from the CMS, since there is an embedded WYSIWYG editor, so I didn't want to paste the entire source, since it is about 2500 lines of code. I would post the URL, but the page and site are not public.

    Here is the entire code if you would like, I pasted it into a new doc on a public page, but I don't want to break the rules about having forum members looks through all my lines of code.

    http://www.puc.edu/PUC/go/code_test.html

    There is a table that wraps the "runs", "for", and "until" form section. This is the table that I need to attatch the id to. Starts on line 2421.

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by hubbni View Post
    Here is the entire code if you would like, I pasted it into a new doc on a public page, but I don't want to break the rules about having forum members looks through all my lines of code.
    Iíve never heard of any such rule. It should work fine if you put the relevant code and link to the complete page from the start (in the future).

    Placing the following code at the end of the body element seems to show that my code works fine. Note that itís a bit complicated since it follows my usual practice of compliance through separation and testing for support.

    Code:
    <div id="scripts">
    	<!--[if !IE]>-->
    	<script type="application/ecmascript">
    		if (document.implementation.hasFeature("CSS", "2.0")) {
    			document.getElementById("calendar_event_single_0_end_enabled").parentNode.parentNode.parentNode.parentNode.setAttribute("id", "remove");
    			document.getElementById("remove").style.setProperty("background", "red", "important");
    		}
    	</script>
    	<!--<![endif]-->
    	<!--[if IE]>
    		<script type="text/javascript">
    			document.getElementById("calendar_event_single_0_end_enabled").parentNode.parentNode.parentNode.parentNode.setAttribute("id", "remove");
    			document.getElementById("remove").style.background = "red !important";
    		</script>
    	<![endif]-->
    </div>
    You might want to work on your code, by the way.

    • The W3C validator reports 170 XHTML errors. [1]
    • Validome reports 121 XHTML errors. [2]
    • There are other errors that a validator wonít catch. For example, document.write is incompatible with XML (and, thus, XHTML).
    • An XML version of your page clearly demonstrates that it doesnít pass as correct XHTML. [3]
    1. http://validator.w3.org/check?verbos...code_test.html
    2. http://www.validome.org/validate/?ur...code_test.html
    3. http://www.jsgp.us/xhtml/CF118560.xhtml
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Regular Coder
    Join Date
    May 2003
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You might want to work on your code, by the way.
    The W3C validator reports 170 XHTML errors. [1]
    Validome reports 121 XHTML errors. [2]
    There are other errors that a validator wonít catch. For example, document.write is incompatible with XML (and, thus, XHTML).
    An XML version of your page clearly demonstrates that it doesnít pass as correct XHTML. [3]
    Remember, this is all code that is generated by my CMS, so I cannot do anything to change this code. This is actually a backend page that allows users to create assets for our website, so it is not a publicly accessable page. All public pages will be XHTML compliant and error free. Don't worry, I am not an newbie in that area, just javascript.

    Thanks for the help, I will let you know how it goes.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •