CODEWITHSUNDEEP
javascriptjquerycssarrayshtml
Mohamed Islam
Mohamed Islam

Reputation: 752

Word replacement while user is typing input (JS)

I have a code that displays what an user is typing and that input is written down back into a in the html document.

This is the code below:

<html><head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style> body{font-family:century gothic;}</style>
</head>
<body style="zoom: 1;">

<div style="padding:10%;">



<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>




<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>



<script type="text/javascript">
$('.chatinput').keyup(function(event) {
newText = event.target.value;
$('.printchatbox').text(newText);
});  
</script>

Can someone please help me to figure out how I can make it so that it replaces a word or a line of string into something else live while the user is typing.

For example is the user writes "this is a string" ... the program writes it down on the html document, but also automatically changes that specific string into something like "This is a text" from "This is a string".. Please help!

Upvotes: 2

Views: 5973

Answers (3)

user5194311
user5194311

Reputation: 11

You can simply use the replace function on your variable.

<html><head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style> body{font-family:century gothic;}</style>
</head>
<body style="zoom: 1;">

<div style="padding:10%;">



<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>




<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script src="jquery.zclip.js"></script>



<script type="text/javascript">
$('.chatinput').keyup(function(event) {
newText = event.target.value;
$('.printchatbox').text(newText.replace("This is a string","This is a text"));
});  
</script>

Upvotes: 1

KiiroSora09
KiiroSora09

Reputation: 2287

Please see my fiddle here.

I created an object where you can add all the strings you need to replace in a key-value pair. Please keep in mind to escape special characters for RegExp though (with a \).

JS

var replaceValues = {
    'string' : 'text',
    'foo' : 'bar'
}

$('.chatinput').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('.printchatbox').text(newText);
});

Upvotes: 1

Saravanan Arunagiri
Saravanan Arunagiri

Reputation: 595

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<textarea type="text" name="fname" class="chatinput" style="margin: 0px; width:   977px; height: 324px;"> </textarea>
<div style="padding-top:10%;" class="printchatbox"></div>

<script type="text/javascript">
$('.chatinput').keyup(function() {
var newText = $('.chatinput').val();
$('.printchatbox').text(newText);
});  
</script>

Upvotes: 0

Related Questions