how to convert form text input to ASCII in Javascript? - javascript

how to convert text input to ASCII and display in text area..
HTML
<div class="form-group">
<label for="exampleInputPassword1">Favorite Food</label>
<input type="text" class="form-control" id="fFood" placeholder="Favorite Food" required>
<textarea name="txt_output"></textarea>
</div>

I assume what you want mean is to display the "text" typed in textBox in textArea
If so, and here you go: try here by clicking the button to display text in text area
The JS:
function display(){
var result = document.getElementById('fFood');
var txtArea = document.getElementById('textArea');
txtArea.value = result.value;
}
EDIT if you want to get the ASCII code from a string: try it here.
source of reference

If what you mean is how do you get the character code of a character from a javascript string, then you would use the string method str.charCodeAt(index).
var str = "abcd";
var code = str.charCodeAt(0);
This will technically be the unicode value of the character, but for regular ascii characters, that is the same value as the ascii value.
Working demo: http://jsfiddle.net/jfriend00/ZLRZ7/
If what you mean is how you get the text out of a textarea field, you can do that by first getting the DOM object that represents that object and then by getting the text from that object:
var textareas = document.getElementsByName("txt_output");
var txt = textareas[0].value;
If you then want to put that text into the input field, you can do that with this additional line of code:
document.getElementById("fFood").value = txt;

jquery
$(function(){
$('input[type=text]').keyup(function(){
var x = $('input[type=text]').val();
$('textarea').val(x);
});
});
javascript
<script>
function myFunction()
{
var x = document.getElementById("fFood").value;
document.getElementById("ta").value=x;
}
</script>
and html
<div class="form-group">
<label for="exampleInputPassword1">Favorite Food</label>
<input type="text" class="form-control" id="fFood" onkeyup="myFunction()" placeholder="Favorite Food">
<textarea name="txt_output" id="ta"></textarea>
</div>

Related

Use HTML input to replace information from string using Javascript

I'm trying to create a find and replace function that allows users to remove or replace symbols from strings that they input. I've found some found some answers online but I'm struggling to get them to work.
function myFunction(){
var input = document.getElementById("input").value;
var find = document.getElementById("find").value;
var regex = new RegExp("ReGeX" + find + "ReGeX");
var replace = input.replace(regex,"new");
console.log(replace)
}
<label style="margin:5px" style="padding:5px">Find & Replace</label><input style="marigin=5px" type="text" id="find">
<input type="text" id="input">
<button onclick="myFunction()">Submit</button>
Not sure but I are you trying to find and replace anything they entered with "new"? If so you don't need the one line(not sure that it works anyway), but this works. If they enter "old" in the input input and was to replace it with "new", can put "old" it in the find input and it will replace it with "new".
function myFunction(){
var input = document.getElementById("input").value;
var newTxt = document.getElementById("newTxt").value;
var find = new RegExp(document.getElementById('find').value, 'g')
//var regex = new RegExp("ReGeX" + find + "ReGeX");
var replace = input.replace(find,newTxt);
console.log(replace)
}
<label style="margin:5px" style="padding:5px">Find & Replace</label><input style="marigin=5px" type="text" id="find">
Replace with <input type="text" id="newTxt">
<input type="text" id="input">
<button onclick="myFunction()">Submit</button>

How do I pass a dataset attribute dynamically using user input?

I have a text input box where a user inputs what data-* they want to look for in the DOM. I get this user input on a button click then do a little bit of parsing. How would I get the value of the entered text to be the final part of the HTMLElement.dataset selector?
//HTML for text input
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>
//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);
I have read this from MDN Developers but can't figure it out. It looks like you have to pass the data attribute in camel case but might not be able to do it via a variable?
Thanks in advance.
When you need to access an object property via a variable, you need to use array-bracket syntax.
In the example below, type "data-test" into the text box and then hit TAB.
// Get a reference to the input
var specificSelector = document.getElementById("specificSelector");
var a = document.getElementById("a"); // Test element
// Set up an event handler for when the data is changed and the
// input loses focus
specificSelector.addEventListener("change", function(){
// Extract the custom name portion of the data- attribute
var parsedSelector = specificSelector.value.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
// Pass the string (stored in the variable) into the dataset object
// of another element to look up the object key.
var aData = a.dataset[parsedSelector];
console.log("aData: ", aData);
});
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<div id="a" data-test="test2"></div>

How to automatically change a specific text value with an input value?

What I'm trying to achieve is that when I'm entering an input value, the specific number of a textarea's value would replaced too according to the input value.
F.e: If I would enter into the input value a number 4, textarea's specific value (in this case a number) would be 4 too. If I would delete a value from the input, the value would be deleted from textarea too.
As you can see in the snippet, it works bad. It changes a value just one time. After that, 'text-areas' value isn't changing.
Could someone help me with that? Thank you for your time
$('.text1').keyup(function() {
var recommendationText = $('.textarea');
var specificString = '4';
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>
There are a couple of issues with your code. The first is that the specificString value is being reassigned each time you do a keyup, so you need to set the default outside of the event handler. But also, if you delete the value, it will have no way of finding it and will prepend it to the start.
I'd personally recommend using a template based approach, rather than storing the previous value:
var specificString = '[numRows]';
var recommendationText = $('.textarea').val();
$('.text1').keyup(function() {
var numRows = $(this).val();
if (isNaN(parseFloat(numRows)) || !isFinite(numRows) || numRows.length < 1) {
numRows = 0;
}
var str = recommendationText.replace(specificString, numRows);
$('.textarea').val(str);
}).keyup();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1" value="4">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of [numRows] rows.
</textarea>
This could use a proper templating language like Handlebars or Underscore.js templates, but that is too opinion-based to include in my answer.
Declare and initialize specificString outside of keyup() event.Otherwise your value for specificString will be always 4.
var specificString = '4';
$('.text1').keyup(function() {
var recommendationText = $('.textarea');
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
});
Well your issue is you replace the string so next time you look for the 4 it is not there. Reason why is you redefine specificString inside of the loop so it is always 4 and not what the user last typed. So if you move it outside it will work ("sort of")
Your design will fail if the user enters in something that matches another word. EG This, it will replace the first occurrence, not the string you want to replace. Or if you delete the string, you will not have any match.
So what can you do? I would use a data attribute with the original and use that. And I would make some sort of "template" so you know what you are replacing and do not replace another part of the string with the replacement when user matches text.
$('.text1').keyup(function() {
var ta = $('.textarea')
var specificString = /\{4\}/;
var entry = $(this).val() || "4";
var str = ta.data("text").replace(specificString, entry);
ta.val(str);
}).trigger("keyup");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50" data-text="This is a textarea of {4} rows.">
</textarea>
In your way your code would work. Just change your code like this..! There are some logical issues in your code. Initiate the value of specificString outside the keyup() method to get first 4 and then then the value of textbox.
var recommendationText = $('.textarea');
var specificString = recommendationText.val().match(/\d+/);
$('.text1').keyup(function() {
if($(this).val() != '' && $.isNumeric($(this).val())) {
var str = $('.textarea').val().replace(specificString, $(this).val());
recommendationText.val(str);
specificString = $(this).val();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>
Solution is much easier than you might expect.
Note: The $ in ${inputVal} is not jquery, its part of template literals. Don't get confused there.
document.getElementById('text1').onkeyup = changeTextArea;
function changeTextArea() {
let inputVal = document.getElementById('text1').value;
let text = `This is a textArea of ${inputVal} rows`;
document.getElementById("textarea").value = text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text1">
<textarea rows="4" id="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>

Remove all the occurrences of and , using javascript from an input field

I have an input field of type text with the following description
<input type="text" id="inputID"/>
It has the following content
hello and , world and , world hello and world and ,
With the content on the above input field, I am trying to remove all the occurrences of and , using javascript.
Presently, I am doing this but don't know how to pass it to the input field using the element id="inputID" of the input tag
var message= content.replace(/[&]nbsp[;][,]/gi," ");
Your regex must be / |,/g ie any or , in the string. g stand for global search.
var inputValue = document.getElementById("inputID").value ;
var cleanedValue= inputValue.replace(/ |,/g," ");
document.getElementById("inputID").value = cleanedValue;
<input type="text" id="inputID" value="hello and , world and , world hello and world and ,"/>
Or if you find one liner code more fancy then do this.
document.getElementById("inputID").value = document.getElementById("inputID").value.replace(/ |,/g," ");;

How to apply multiple regex on element?

I'm newbie in JavaScript. I'm trying to create something like stackoverflow's textarea(s) for writing a question-answer. Now I have some regex:
text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text.replace(/__(.*?)__/g, "<u>$1</u>");
text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text.replace(/--(.*?)--/g, "<del>$1</del>");
Also I have a textarea:
<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
Now I want to apply those regex on the above textarea on click event (for every pressing key on keyboard). How can I do that?
You can use the oninput-Event for this:
function generate(text) {
text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text = text.replace(/__(.*?)__/g, "<u>$1</u>");
text = text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text = text.replace(/--(.*?)--/g, "<del>$1</del>");
text = text.replace(/`(.*?)`/g, "<code>$1</code>");
text = text.replace(/>(.*?)(\n|$)+/g, "<blockquote>$1</blockquote>");
document.getElementById("out").innerHTML = text
}
<textarea id="Q&A" oninput="generate(this.value)" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>

Categories