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.
Results 1 to 10 of 10
  1. #1
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts

    Replace variable value in textbox or textarea or div by another value

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    // REPLACE VARIABLE VALUE IN TEXTBOX OR TEXTAREA OR DIV BY ANOTHER VALUE
    
    function doRep(IDS, val2replace, change2, elem) {
    if (elem == "T") {
    var txt = document.getElementById(IDS).value; // string to be analysed
    }
    if (elem == "D") {
    var txt = document.getElementById(IDS).innerHTML; // string to be analyzed
    }
    var match = new RegExp(val2replace, 'gi');   // setting regex with val2replace global and case insensitive
    var output = txt.replace(match, change2);     // replacing variable string with variable replacement value
    if (elem == "T") {
    document.getElementById(IDS).value=output;
    }
    if (elem == "D") {
    document.getElementById(IDS).innerHTML=output;
    }
    }
    </script>
    
    </head>
    
    <body>
    
    <input type = "text" id = "txt1" value = "Now is the time for all good men to come to the aid of their country." size = "70">
    <br><br>
    <textarea id="txt2" cols="40" rows="5">
    Now is the time for all good men
    to come to the aid of their country.
    </textarea>
    <br><br>
    <div id="divText">
    Now is the time for all good men<br>
    to come to the aid of their country.
    </div>
    <br>
    Find: <input type="text" id="txt2find" value=""><br>
    Replace: <input type="text" id="reptext" value=""><br>
    <br><br>
    <button
     onclick="doRep('txt1',document.getElementById('txt2find').value,document.getElementById('reptext').value, 'T')">
     Textbox: Do it</button>
    <button
     onclick="doRep('txt2',document.getElementById('txt2find').value,document.getElementById('reptext').value, 'T')">
     Textarea: Do it</button>
    <button
     onclick="doRep('divText',document.getElementById('txt2find').value,document.getElementById('reptext').value, 'D')">
     DIV: Do it</button>
    
    
    </body>
    </html>
    <br><br><br>
    You need to escape the 11 following characters (often called "metacharacters") IN THE FIND STRING with a backslash : <br>
    the opening square bracket [, <br>
    the backslash \, <br>
    the caret ^, <br>
    the dollar sign $, <br>
    the period or dot ., <br>
    the vertical bar or pipe symbol |, <br>
    the question mark ?, <br>
    the asterisk or star *, <br>
    the plus sign +, <br>
    the opening round bracket ( <br>
    and the closing round bracket ). <br>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by Philip M View Post

    You need to escape the 11 following characters (often called "metacharacters") IN THE FIND STRING with a backslash : <br>
    the opening square bracket [, <br>
    the backslash \, <br>
    the caret ^, <br>
    the dollar sign $, <br>
    the period or dot ., <br>
    the vertical bar or pipe symbol |, <br>
    the question mark ?, <br>
    the asterisk or star *, <br>
    the plus sign +, <br>
    the opening round bracket ( <br>
    and the closing round bracket ). <br>
    why don't you do that for us?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Just a suggestion to use:

    Code:
    var oIDS = document.getElementById(IDS);
    ..but it's not significant .

    why don't you do that for us?
    ..that was my first thought as well
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts

    cleaned up ht/js, simplified API, removed escape requirement

    Code:
    <html>
    <head>
    	<script>// REPLACE VARIABLE VALUE IN TEXTBOX OR TEXTAREA OR DIV BY ANOTHER VALUE
    	function doRep(elm, val2replace, change2) {
    		var txt = (elm.value||elm.innerHTML),
    		  // setting regex with val2replace global and case insensitive
    		match = new RegExp(val2replace.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1"), 'gi'), 
    		output = txt.replace(match, change2); // replacing variable string with variable replacement value
    		elm[ (elm.select===undefined) ? "innerHTML" : "value" ] = output;
    	}
    	</script>
    </head>
    <body>
    	<input type=text id=txt1 value="Now is the time for all good men to come to the aid of their country." size=70>
    	<br>	<br>
    
    	<textarea id=txt2 cols=40 rows=5>Now is the time for all good men to come to the aid of their country.</textarea>
    	<br>	<br>
    
    	<div id=divText>Now is the time for all good men
    		<br>to come to the aid of their country.</div>
    	<br>
    
          Find:
    	<input type=text id=txt2find >
    	<br>Replace:
    	<input type=text id=reptext >
    	<br>
    	<br>
    	<br>
    	<button onclick=doRep(txt1,txt2find.value,reptext.value)>Textbox: Do it</button>
    	<button onclick=doRep(txt2,txt2find.value,reptext.value)>Textarea: Do it</button>
    	<button onclick=doRep(divText,txt2find.value,reptext.value)>DIV: Do it</button>
    </body>
    </html>
    tested: IE10/7,FF, CH
    Last edited by rnd me; 12-07-2012 at 08:28 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I don't want to appear pedantic but.. DOCTYPE and title..

    I would, personally, use quotes - particularly for onclick.

    Added: I might also prefer:

    Code:
    elm[ (elm.value) ? "value" : "innerHTML" ] = output;
    Last edited by AndrewGSW; 12-07-2012 at 08:49 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by AndrewGSW View Post
    Added: I might also prefer:

    Code:
    elm[ (elm.value) ? "value" : "innerHTML" ] = output;
    were showing off js here, not html. the function is fine. i wanted to remind folks of html options as a side-effect.

    if you simply check for .value, you can erroneously hit on <li> and possibly others.
    also, that misses empty inputs.

    anything a user can edit with the keyboard should have a select method attached, custom controls included.
    Last edited by rnd me; 12-07-2012 at 09:32 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @rnd me. Thank you.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Since when did this section of the forum become a question rather than solution threads?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    Quote Originally Posted by jmrker View Post
    Since when did this section of the forum become a question rather than solution threads?
    you're the only one asking questions here... hehe
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by rnd me View Post
    you're the only one asking questions here... hehe
    Story of my life.
    I'm not part of the solution, so I must be part of the problem!


  •  

    Posting Permissions

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