CodingForums.com - Replace variable value in textbox or textarea or div by another value

CodingForums.com (http://www.codingforums.com/index.php)

- Post a JavaScript (http://www.codingforums.com/forumdisplay.php?f=19)

- - Replace variable value in textbox or textarea or div by another value (http://www.codingforums.com/showthread.php?t=283755)

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 : 
the opening square bracket [, 
the backslash \, 
the caret ^, 
the dollar sign $, 
the period or dot ., 
the vertical bar or pipe symbol |, 
the question mark ?, 
the asterisk or star *, 
the plus sign +, 
the opening round bracket ( 
and the closing round bracket ).

Quote:

Originally Posted by Philip M (Post 1298089)

why don't you do that for us?

Just a suggestion to use:

Code:

var oIDS = document.getElementById(IDS);

..but it's not significant :thumbsup:.

Quote:

why don't you do that for us?

..that was my first thought as well :D

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

I don't want to appear pedantic :D but.. DOCTYPE and title..

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

Added: I might also prefer:

Code:

elm[ (elm.value) ? "value" : "innerHTML" ] = output;

Quote:

Originally Posted by AndrewGSW (Post 1298155)

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.

Since when did this section of the forum become a question rather than solution threads?
:confused:

Quote:

Originally Posted by jmrker (Post 1298186)

Since when did this section of the forum become a question rather than solution threads?
:confused:

you're the only one asking questions here... hehe

Quote:

Originally Posted by rnd me (Post 1298193)

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! :mad: :rolleyes: