I have two text boxes.What I want to do is while i Write something in one text box it should be copied to the other(i am able to do so).But my requirement is if i write anything else rather then a-z or A-Z or 0-9 then it should not copied to the second text box.
my html
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)">
<textarea name="source2" id="src2" cols="150" rows="20" >
my js
function showRelated(e) {
$("#src2").val($("#src1").val()) ;
}
Let me explain little bit more,Suppose i write LO^&1VE then in the second text box LOVE should be copied only.now if i go further like adding more LO^&1VE C**V then in the second text box LOVE CV should be appaer only.Can any one suggest me how to do this?
Use the regular expression [^a-zA-Z0-9] to check for or replace characters that are not alphanumeric
function showRelated(){
$("#src2").val( $("src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
Demo
function showRelated(e){
$("#src2").val( $("#src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="src1" onkeyup="showRelated(event);"></textarea>
<textarea id="src2"></textarea>
Rather brutal way of doing it but here goes
function showRelated(e) {
var text=$("#src1").val().split("");
var pattern=/^[a-zA-Z0-9]*$/
var nStr='';
for (var i=0;i<text.length;i++) {
if (pattern.test(text[i])) {
nStr+=text[i];
}
}
$("#src2").val(nStr);
}
Basically this will check each char follows your criteria and then puts it in if it does.
Related
I am writing a program that needs to parse each word of a sentence which user is inputing in a text field and performs work of outputing each word of the sentence to a seperate line. I am very close, i was able to get it to do so with the replace function on every space to replace with a but it is only doing it to the first space. How could I get it to repeat it with every space not know how many words the user will input in his sentence? So far this is what I have.
<header>
<h1>Parse Test</h1>
</header>
<br>
<p>Please enter facts:</p>
<input id="inp" type="text">
<br>
<br>
<button type="button" onclick="pass()">Process</button>
<br>
<p id="iop"></p>
<br>
<script>
function pass() {
var lx = document.getElementById("inp").value;
var tx = lx.replace(" ","<br>");
document.getElementById("iop").innerHTML = tx;
}
</script>
You can pass a regular expression, and tell it to apply globally with the g flag:
var tx = lx.replace(/ /g, '<br>');
Simplified working example:
console.log('A few different words'.replace(/ /g, '<br>'));
I have this line:
first (word1-word2-word3) second (any1-any2-any3)
Lets say I have a textarea and two inputs (input1 and input2).
When I paste the line above inside the textarea, and by using JavaScript, I want:
word1-word2-word3
to go to the first input (input1) and for the other part;
any1-any2-any3
to go to the second input (input2).
Thank you.
You could use a regular expression and take the two matching groups.
function split(v) {
var m = v.match(/^.*\((.*)\).*\((.*)\)$/);
document.getElementById('input1').value = m[1];
document.getElementById('input2').value = m[2];
}
<textarea onchange="split(this.value)"></textarea><br>
<input type="text" id="input1"><br>
<input type="text" id="input2">
in text area line beaks are auto added when text is longer than textarea line, and question is how to get text from textarea with newline chars (those added by user and added by textarea)? please post example in jsfiddle.net
$(selector).val()
returns text with user newline character and it drops auto newline character which are needed
my result so far
here is a sample, additional newline character is needed between 'seven' and 'eight'
Try like this:
html:
<div id="fi"></div>
<textarea id="txtarea"></textarea>
<button id="btn">go</button>
jquery:
$(document).ready(function() {
var btn = $('#btn');
var txtarea = $('#txtarea');
var result = $('#fi');
btn.click(function() {
var val = txtarea.val().replace(/\n/g, '<br/>');
result.html(val);
return false;
});
});
or set no of rows
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
I have came up with this solution (it also restricts amount of characters in line and amount of lines)
working solution
ttxt()
is a main method
I'm having a bit of trouble validating a form I have, I can check for only letters, numbers and a full stop ("period") in a single text input, but I can't for the life of me get it to work at all on a textarea field.
in my validation I have this:
var usernamecheck = /^[A-Za-z0-9.]{5,1000}$/;
the validation I've tried that doesn't work on the textarea ($ITSWUsers) is:
if(!document.all.ITSWUsers.value.match(usernamecheck))
{
alert ("Please write the usernames in the correct format (with a full stop between first and last name).");
return false;
}
however, the following on a 'input type="text"' works just fine on the same form
if(!document.all.SFUsersName1.value.match(usernamecheck))
{
alert("Usernames can only contain letters, numbers and full stops (no spaces).");
return false;
}
I need it to validate usernames, 1 name per line
e.g.
John.smith
Peter.jones1
these are both OK but the following wouldn't be:
John Smith
David.O'Leary
3rd.username
any help/pointers with this would be greatly appreciated
(I only know basic html/php/javascript)
To validate line by line, I'd use the split function to turn each line into an array. Then, loop through the array and run your RegEx on each line. That way, you can report exactly what line is invalid. Something like this:
<textarea id="ITSWUsers"></textarea>
<button onclick="Validate()">Validate</button>
<script>
var usernamecheck = /^[A-Za-z0-9]{5,1000}\.[A-Za-z0-9]{5,1000}$/;
function Validate()
{
var val = document.getElementById('ITSWUsers').value;
var lines = val.split('\n');
for(var i = 0; i < lines.length; i++)
{
if(!lines[i].match(usernamecheck))
{
alert ('Invalid input: ' + lines[i] + '. Please write the usernames in the correct format (with a full stop between first and last name).');
return false;
}
}
window.alert('Everything looks good!');
}
</script>
I'd trim the input from the textarea using JQuery (or a JS function), and then use this regex:
/^([A-Za-z0-9]+\.[A-Za-z0-9]+(\r)?(\n)?)+$/
Like so:
function testFunc()
{
var usernamecheck = /^([A-Za-z0-9]+\.[A-Za-z0-9]+(\r)?(\n)?)+$/;
if(!$.trim(document.all.ITSWUsers.value).match(usernamecheck))
{
alert ("Please write the usernames in the correct format (with a full stop between first and last name).");
return false;
}
}
<textarea id="ITSWUsers" cols="50" rows="10">
John.smith
Peter.jones1
</textarea>
<button onclick="testFunc()">Click Me</button>
See it working here:
http://jsfiddle.net/DkLPB/
What I am doing is creating a simple html page in which there is a textbox. A user posts some input to that textbox such as
first last
first last
first last
first last
Imagine these are different names. What I would like to do is take the input in the textbox, and display it to the screen with the repeating names taken out, in alphabetical order, and with option tags added around them.
What I have
<div id="contentdisplay"></div>
<FORM action="" method="">
<p><LABEL for="content">Paste Code Here: </LABEL></p>
<p><textarea id="content" cols="80" rows="40"></textarea></p>
</FORM>
<script type="text/javascript">
$(document).ready(function() {
$('#content').change(function() {
var test = $('#content').val();
$("#contentdisplay").html(test);
});
});
</script>
Right now it takes the value from the textbox when the user clicks outside of it and spits it to the screen inside of the "contentdisplay" div. I'm stuck on the part where I split that user input into lines. I tried test.split('/n') and stuck it into a variable but that did not work out.
My Thoughts on Going About This
While looping, Split the form input by newline character, put each line into an array
Sort the array into alphabetical order. (Remove any empty lines or spaces before and after the lines during this part.)
I'm not sure about removing the doubles. In Java I used a set which automatically only allowed one of each entry to come in.
Using jquery's .html() cycle through array for display and add tags around
Wondering if anyone can enlighten me on my ideas and how I could go about this. Thank you!
Here is the near final version. Thanks to Erik for his help.
Here is what I did to get it where I wanted. Thanks for the help Erik.
<script type="text/javascript">
function process() {
entered = $('#content').val();
lines = entered.split(/\n/);
opttext = "";
lines = jQuery.unique(lines);
lines.sort();
for(var i in lines) {
opttext += "<option>" + lines[i] + "</option>";
}
$('#contentdisplay').html("<select>"+opttext+"</select>");
}
$(document).ready(function() {
$("#content").bind('change', process);
});
</script>
<div id="contentdisplay"></div>
<FORM id="myform" action="" method="">
<p><LABEL for="content">Paste Code Here and click anywhere on the screen: </LABEL></p>
<p><textarea id="content" cols="40" rows="10"></textarea></p>
</FORM>
Try this:
http://jsbin.com/okigi/3/edit
(edit: changed the form tag to a div so the example doesn't sumbit anywhere)
function process() {
entered = $('#content').val();
lines = entered.split(/\n/);
opttext = ""; for(var i in lines) {
opttext += "<option>" + lines[i] + "</option>";
}
$('#myform').append("<select>"+opttext+"</select>");
}
$(document).ready(function() {
$("#process").bind('click', process);
});
<FORM id="myform" action="" method="">
<p><LABEL for="content">Paste Code Here: </LABEL></p>
<p><textarea id="content" cols="40" rows="10"></textarea></p>
<button id="process">Go!</button>
</FORM>
This doesn't take out duplicates, or put them in alaphabetical order, but once you have the lines in the array "lines" you can figure out how to do those things on your own.