...

View Full Version : Replace variable value in textbox or textarea or div by another value



Philip M
12-07-2012, 04:32 PM
<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>

rnd me
12-07-2012, 06:54 PM
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?

AndrewGSW
12-07-2012, 07:05 PM
Just a suggestion to use:


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


why don't you do that for us?
..that was my first thought as well :D

rnd me
12-07-2012, 08:19 PM
<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

AndrewGSW
12-07-2012, 08:41 PM
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:


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

rnd me
12-07-2012, 09:29 PM
Added: I might also prefer:


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.

AndrewGSW
12-07-2012, 09:32 PM
@rnd me. Thank you.

jmrker
12-07-2012, 10:01 PM
Since when did this section of the forum become a question rather than solution threads?
:confused:

rnd me
12-07-2012, 10:31 PM
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

jmrker
12-08-2012, 12:16 AM
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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum