Get newline characters from textarea - javascript

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

Related

Get input[text] value before special characters are trimmed in typescript

I have a from. User can fill an input field with text that contains special characters like \n, \t and etc. I have to replace these special characters and add it back as value of the input field.
for example:
user input is: hello, \n how are you doing? \t this is a sample text.
This is what I need: hello, newline how are you doing? tab this is a sample text.
I am using JQuery and Typescript 2.4
How about this?
$('#input').keyup(function () {
var val = $(this).val();
var replaceWithBr = val.replace(/\\n/g, '<br>');
var replaceWithTab = replaceWithBr.replace(/\\t/g, ' ');
$('#result').html(replaceWithTab);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<div id="result"></div>

Replacing [b][/b] to apply BOLD text on a DIV

On my Ionic App I have a Textarea where the user can select a text and with button [BOLD]
add [b] [/b] around the selection.
How can I apply BOLD formating, replacing the [b] [/b] on the output text?
Thats my code. And here's the JsFiddle
<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<input type="button" id="bold" value="BOLD" />
<pre id="TheOutput"></pre>
$(document).ready(function () {
$('#TheButton').click(PutTextIntoDiv);
});
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').text(decodeURIComponent(TheText));
}
$( "#bold" ).click(function() {
var textArea = document.getElementById("TheTextInput");
if (typeof(textArea.selectionStart) != "undefined") {
var begin = textArea.value.substr(0, textArea.selectionStart);
var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
var end = textArea.value.substr(textArea.selectionEnd);
textArea.value = begin + '[b]' + selection + '[/b]' + end;
}
});
Thanks for your help!!
*Its not duplicate from Is it possible to display bold and non-bold text in a textarea?
Cause I don't want format the text inside the textarea, but the OUTPUT text.
Consider PutTextIntoDiv() replacing with:
function PutTextIntoDiv() {
$('#TheOutput').html($('#TheTextInput').val().replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'));
}
The <pre> in your JSFiddle should render <b> fine.
You can do a RegEx replace to convert the "BBCode" tags into html tags using .replace(/\[b\](.*)\[\/b\]/g, '<b>$1</b>'). Additionally, jQuery's .text() automatically encodes HTML entities, so you will not be able to add stylized text, so you should be using .html() instead. Overall, your code should be:
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').html(decodeURIComponent(TheText).replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>'));
}
I'm not sure what the purpose of encoding and immediately decoding uri components is, but I tried to keep as much as I can untouched. Here's an updated fiddle: http://jsfiddle.net/TheQueue841/62karfm1/

Copy text fom one textbox to another with some restriction

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.

regex is not filtering text

<script type="text/javascript">
function clean(e){
var textfield = document.getElementById(e);
var regex = /[^a-z 0-9]/gi;
textfield.value = textfield.value.replace(regex, "");
}
</script>
<textarea id="ta" name="ta" onkeyup="clean('ta')" onkeydown="clean('ta')"></textarea>
as you can see that my code filter all the alphabet character and i expected to do this in real time but this code is not working. Please help me to sort out this problem.
Fiddle represtation
You can remove all alphabets (A-Za-z) with this:
DEMO
function clean(e) {
var textfield = document.getElementById(e);
var regex = /[a-z]/gi; // all alphabet characters ignorecase
textfield.value = textfield.value.replace(regex, "");
}
And you need to keep your JavaScript code in <script> tag, in the html, because when it by the time it reaches onclick="clean('ta')", it hasn't yet reached the declaration of the function clean and hence throws a ReferenceError (which you see in the console (F12))
Check this demo jsFiddle
What can i do?
Modify your existing regular expression to update this /[a-zA-Z]/gi to ignore both uppercase and lowercase alphabetically character.
Here I can validate your regular expression
HTML
<textarea id="ta" name="ta" onkeyup="clean('ta')" onkeydown="clean('ta')"></textarea>
JavaScript
function clean(e) {
var textfield = document.getElementById(e);
var regex = /[a-zA-Z]/gi;
textfield.value = textfield.value.replace(regex, "");
}
Hope this help you!

Regular expression on textarea

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/

Categories