Javascript- Creating a rudimentary text replacer?

condra · 04-11-2011 3:35am #1

Hi guys.

I've been trying to find some javascript code to make a basic "text replacer", which will take user inputted text, and spin it to replace some words, or possibly whole phrases, just like an "article spinner".

Does anyone know where I can find such a thing?

Part of the concept seems to be here:
http://www.tizag.com/javascriptT/javascript-string-replace.php

but I'm wondering how to integrate it with a form, or some way the user can input a section of text.

I'm hoping it's possible with javascript, and I won't need to delve into php

Thanks in advance for any tips at all.

Giblet · 04-11-2011 7:10am

Regex will help you as you will be doing pattern matching. You'll submit a form, catch the submit with javascript and read the form values, and then perform your pattern matching + output. Although the old adage applies. "You're about to solve a problem using a regex, now you've two problems."

condra · 04-11-2011 5:46pm

Thanks for your reply. I only have basic Javascript skills and it looks like there's a fair bit to get into. I might just pay someone to do the nixer.

DonkeyStyle \o/ · 06-11-2011 4:09am

I had absolutely nothing better to do with my Saturday night.

[html]
<html>
<head>
<style type="text/css">
#replaceElement {
width: 500px;
height: 300px;
border: 1px solid #333;
}
</style>

<script type="text/javascript">
var replacements = Array(
Array("I've", 'i haz'),
Array('user', 'randomer'),
Array('text', 'gender'),
Array('i', 'me'),
Array('the', 'le'),
Array('is', 'iz'),
Array('thing', 'schlong'),
Array('it', 'that thingy'),
Array('spin', 'meatspin'),
Array('find', 'acquire'),
Array('to', '2'),
Array('code', 'hax'),
Array('does', 'do'),
Array('javascript', 'DOS commands'),
Array('this', 'dis')
);
var numReplacements = replacements.length;

function doTheThing()
{
var text = document.getElementById('replaceElement').value;
for(var i=0; i< numReplacements; i++)
{
var searchString = '\\b'+replacements[0]+'\\b';
var replaceString = replacements[1];

var searchRegex = new RegExp(searchString, "gim");
text = text.replace(searchRegex, replaceString);
}
document.getElementById('replaceElement').value = text;
}
</script>

</head>
<body>
<textarea id="replaceElement" onKeyUp="doTheThing()" onChange="doTheThing()" onBlur="doTheThing()" onMouseOver="doTheThing()" onMouseOut="doTheThing()"></textarea>

</body>
</html>
[/html]

It's tailored to replace words in your opening post (I had to have my fun), obviously you'll change these by building up the array with your own word pairings.
You'll want to use double quotes around replacement-words that contain single quotes ("I've"), and don't end the array with a comma after the last element, as you can see on the line:
Array('this', 'dis')
JQuery might have some better way to live-update, since pasting text in doesn't update until you trigger one of the events.

condra · 07-11-2011 2:00pm

OMG! DonkeyStyle I just saw that post now. I'm gobsmacked. Thank you so much. It's 99% what I needed to do.

All I needed to do then was add some randomness to the arrays and put a clicky button at the bottom to control the spinning.

You are an absolute legend. I hope I can return you the favour some time. Let me know if you ever need anything done with graphics/sound.

Thanks a million.

Dec

PS - You also gave me a great idea. "LOLCAT-SPEAK" generator hehehe

DonkeyStyle \o/ · 07-11-2011 6:05pm

No worries, I hadn't touched regex in JS before, so it was an interesting exercise for me. If you get some use out of it, all the better.

condra · 09-11-2011 5:24pm

Hey DonkeyStyle, if you're still around. I'm getting there, but I think I might be doing things in a longer way than neccessary.

I want to replace every word from the array, with any other word, from the array.

Right now, I have to set up 5 Arrays for 5 words, eg

Array('thing','schlong','pong','pang','thingy'),
Array('schlong','thing','pong','pang','thingy'),
Array('pong','thing','schlong','pang','thingy'),
Array('thingy','thing','schlong','pang','pong'),
Array('pang','thing','schlong','pong','thingy')

and then use a random number for my replacing, eg:

var numReplacements = replacements.length;

function doTheThing()
{
  var text = document.getElementById('replaceElement').value;
  for(var i=0; i< numReplacements; i++)
  {
	
    var randy= Math.floor(Math.random() * 5);
    
    var searchString = '\\b'+replacements[i][0]+'\\b';
    var replaceString = replacements[i][randy];
	
    var searchRegex = new RegExp(searchString, "gim");
    text = text.replace(searchRegex, replaceString);
  }
  document.getElementById('replaceElement').value = text;
}

That works great, even though there is always a slim chance that a word wont change because it replaces itself with itself!

However, if I do go the whole hog and create a masive Array of (arrays of) words, it would be much easier more efficient if I could use a single Array for every "swap group" as such.

I've tried playing with the code, using randomness, but it always ends up either stuck in a loop, or replacing everything with the last word in each "swap group".

I guess I have pretty poor logic because I can't figure it out!

If you can give me any pointers, I would greatly appreciate it, but I understand if you're busy. You've already done more than I could ever hope for from a stranger.

Cheers,

Declan

PS - There are some advantages of my current method. I can choose not to replace certain words, if they happen to be ambigious in other contexts, or are not completely interchangable.

DonkeyStyle \o/ · 09-11-2011 8:49pm

Mmmm, ok... yeah, I see there are some problems there. You've got some recursion going on and you're ending up with the logical conclusion of all words ending up the same.
Here's a more complicated version with arrays of related/interchangeable words, which is what I think you're going for.
[html]
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 13px;
}
.replacerBox {
width: 100%;
height: 200px;
border: none;
}
.replacerBox:focus
{
background-color: #F7F5DD;
}
</style>

<script type="text/javascript">
var replacements = Array(
Array('horse', 'dog', 'monkey', 'zebra', 'goat', 'cat'),
Array('an apple', 'an orange', 'a banana', 'a lemon', 'a cabbage', 'a can of coke', 'a pack of soiled tampons', 'an apple tart', 'a handful of rusty nails'),
Array('tractor', 'bicycle', 'hang-glider', 'skateboard', 'Nissan Micra', 'car', 'bike', 'segway', 'pogo stick', 'platform shoes'),
Array('eyes', 'ear', 'nose', 'head', 'leg', 'arm', 'nipple', 'arse', 'face', 'mouth'),
Array('joy', 'terror', 'sadness', 'love', 'bitter hatred', 'melancholy', 'depression', 'glee', 'smug self-satisfaction', 'surprise'),
Array('looked at', 'danced with', 'punched', 'gently licked', 'caressed', 'nodded at', 'screamed at', 'argued with', 'jumped over', 'wrestled with'),
Array('nodded', 'laughed', 'fainted', 'went to sleep', 'went skydiving', 'smoked some hash', 'exploded', 'played monopoly for six hours')
);
var numReplacements = replacements.length;

function doTheThing()
{
var text = document.getElementById('replaceElement').value;

for(var h=0; h < numReplacements; h++)
{
var numReplacementsInner = replacements[h].length;
for(var i=0; i< numReplacementsInner; i++)
{
var randy = Math.floor(Math.random() * numReplacementsInner);
var searchString = '\\b'+replacements[h]+'\\b';
var replaceString = "aaaa";
var searchRegex = new RegExp(searchString, "gim");
text = text.replace(searchRegex, replaceString);
textPlode = text.split("aaaa");
var numSplits = textPlode.length;
var newText = '';
for(var j=0;j<numSplits;j++)
{
randy = Math.floor(Math.random() * numReplacementsInner);
newText += textPlode[j];
if(j<numSplits-1) newText += replacements[h][randy];
}
text = newText;
}
}
text = text.replace(/aaaa/gim, "");
document.getElementById('replaceElement').value = newText;
}
</script>

</head>
<body>
<fieldset style="margin-top: 20px;"><legend>TEXT REPLACER</legend><textarea class="replacerBox" id="replaceElement">I got down off my tractor and gave my horse an apple, his eyes lit up and we were both filled with joy. We looked at each other and nodded.</textarea></fieldset>
<br><input type="button" id="thegobutton" value="Submit" onClick="doTheThing()">
</body>
</html>
[/html]

but I understand if you're busy.

Nah, work has tapered off so I'm bored off my tits... having fun farting around with this.

condra · 09-11-2011 10:16pm

You're incredible. It's simply perfect. You nailed it.

Thank you so much. You have saved me a lot of bashing my head off the keyboard. God I really suck at JS.

I don't know what else to say, just I really appreciate it very much and want you to know you've made my day really.

Thanks man.

Adam · 09-11-2011 11:15pm

A career in comedic programming? I ran the script and had some lols

Javascript- Creating a rudimentary text replacer?

Comments