Use HTML input to replace information from string using Javascript - 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>

Related

how to get two word from a input field and make url based on another field

here i have two input field as like
$(document).ready(function() {
$("#business_name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
$("#business_url").val(Text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="business_name" name="business_name" placeholder="Business Name" />
<br><br>
<input type="text" id="business_url" name="business_url" placeholder="Business URL" />
now I want if someone wrote : My Business Name on first input field then 2nd field it will be write mybusiness thats it but now it showed my-business-name i dont want this (I need only two word if it will take longer name then it only shows first two word thats it )
To get only the first two words you can split() the string in to an array by spaces and then use slice() to get the first two elements of the resulting array. Then you can join it back together before displaying in the input.
Also note I added trim() and a regex to replace multiple whitespace with a single one, otherwise it would affect how split() builds the array and could end up missing words.
jQuery($ => {
$("#business_name").on('input', e => {
var text = $(e.target).val().trim().replace(/\s+/, ' ').toLowerCase().split(' ').slice(0, 2).join('');
$("#business_url").val(text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="business_name" name="business_name" placeholder="Business Name" /><br /><br />
<input type="text" id="business_url" name="business_url" placeholder="Business URL" />
After replacing certain characters with ' ' count the number of ' ' in the string. If the count is 2 stop replacing or you can return from the function.
Look at the modified code below:
$(document).ready(function() {
var count = 0;
$("#business_name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-zA-Z0-9]+/g,' ');
count = (Text.split("-")).length - 1;
if (count == 2) {
return;
}
$("#business_url").val(Text);
});
});

Javascript find and replace function using while loop

I have this simple function to find and replace text in my textarea message. User will be able to type into the textarea and also be able to find and replace words from the text area they just entered. Currently I'm trying to use a while loop to replace multiple same words found in the textarea that the user keyed in. But every time I run it it seems to freeze the entire html page any idea why this is happening?
find and replace are textbox for user to key in the word they want to find and replace the user is able to key in multiple words to replace as well.
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
while (message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(find, replace);
}
}
Replace while loop with a replaceAll.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
document.getElementById("message").value = message.replaceAll(find, replace);
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
Just a addition in other answer you can use g for global search and to replace where you find that word .
Read more about regex and //g here
Also you can let the search case-insensitivity using i along with g like this :
message.replace(/find/g, replace)
This way it will also replace Find finD FIND
And instead of using while you can use if loop
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message').value;
var lmao = message.indexOf(find);
if(message.indexOf(find) != -1) {
document.getElementById("message").value = message.replace(/find/g, replace);
}
}
<div>Find <input id="find" value="find" /></div>
<div>Replace <input id="replace" value="replace" /></div>
<div>
<textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea>
</div>
<div>
<button onclick="findText()">Submit</button>
</div>
The issue is with your while condition. When all input fields are empty your while condition is true. So inside the while condition the input value keeps on updating to empty string again, which makes loop an infinite loop. Thats why your ui is breaking.
Issue Scenario
console.log(("").indexOf("") !== -1);
To fix this, you have to make sure that your find and replace values are not same. Or else, it will be an infinite loop again.
Fixed Solution
function findText() {
let find = document.getElementById('find').value;
let replace = document.getElementById('replace').value;
let message = document.getElementById('message');
while (find !== replace && message.value.indexOf(find) != -1) {
message.value = message.value.replace(find, replace);
}
}
<input type="text" id="find">
<input type="text" id="replace">
<textarea name="" id="message" cols="30" rows="10"></textarea>
<button onclick="findText()">Check</button>

How to take user's form input and use it for event element?

How do I take the input in the forms, and apply them to the events "Name" and "TheirName" ?
Tried various codes from users that didn't work.
I'm trying to get the inputs of "name" and "theirname" to apply to the elements with blanks (____) when I click the Fill Names button
function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", "Name");
document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", "Their Name");
document.getElementById("theirname").innerHTML = res;
}
<form>
<p>Name<br><input type="text" name="name">
<br>
</p>
<p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>
When you do str.replace("_____", "Name"); you're passing the literal string Name to the replace function when instead you want to get the value of the textbox. You can use document.querySelector() for that:
function myFunction() {
var str = document.getElementById("myname").innerHTML;
var res = str.replace("_____", document.querySelector('input[name="name"]').value);
document.getElementById("myname").innerHTML = res;
}
function myFunction2() {
var str = document.getElementById("theirname").innerHTML;
var res = str.replace("_____", document.querySelector('input[name="theirname"]').value);
document.getElementById("theirname").innerHTML = res;
}
<form>
<p>Name<br><input type="text" name="name">
<br>
</p>
<p>Their Name<br><input type="text" name="theirname">
</form>
<p>This is a test for replacing "_____" with "Name" Name and "Their Name" for other name, for sentences with names and greetings.</p>
<p id="myname">Thank you for helping me with those shelves, by the way my name is _____. Would you like to help me with these boxes?</p>
<p id="theirname">There's customer outside who needs help bring a table inside. His name is _____. I'm going to go help him.</p>
<button onclick="myFunction();myFunction2();">Fill Names</button>

how to convert form text input to ASCII in 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>

Regex For HTML Name Attribute

I'm trying to write a regex script that will parse through HTML name attributes and return each nested array as a match. Here's an example:
<input type="text" name="contact[email]" />
<input type="text" name="contact[address][street]" />
I need some javascript regex that will parse those and match them in this way
Match 1: contact Match 2: email
Match 1: contact Match 2: address Match 3: street
Here's the current regex I have:
/(^.*?)(\[(.*?)\])?$/
Thanks!
I think the easiest way to do this is
var str = "contact[email]"
str.match(/\w+/g)
//=> ["contact", "email"]
var str = "contact[address][street]"
str.match(/\w+/g)
//=> ["contact", "address", "street"]
What I would do is delimit each of your name with []
So it would go like this:
<input type="text" name="[contact][email]" />
<input type="text" name="[contact][address][street]" />
Then I would use this for the regex:
(?:\[)(.*?)(?:\])
My solution cuts down on the number of operations needed and makes your naming convention a lot more straight forward. Each match would represent a separate entry in the name section
Use the following regex:
/(^[^\[]+)(?=\[)|(([^\[\]]+)(?=\]))/g
Example usage below.
Demo fiddle here.
HTML:
<input id="one" type="text" name="contact[email]" />
<input id="two" type="text" name="contact[address][street]" />
JavaScript:
var regex = /(^[^\[]+)(?=\[)|(([^\[\]]+)(?=\]))/g;
var nameOne = document.getElementById('one').getAttribute('name');
console.log('one: ', nameOne.match(regex));
var nameTwo = document.getElementById('two').name;
console.log('two: ',nameTwo.match(regex));
Output:
one: ["contact", "email"]
two: ["contact", "address", "street"]
<input type="(?<type>[A-Za-z0-9]+)" name="(?<Name>[A-Za-z0-9\[\]]+)" />
works fine. I attached Image to show how works
as each value will be returned in array after RegexMatch,
then you can do this
var first = RegexMatch.Groups["Name"].Split('[')[0];
You will get the first value in the name="contact[address][street]", first = "contact"
then you can do
var second = regexMatch.Groups["Name"].Split('[')[1];
then second = "address";
by the way this is for C#, convert to javascript!!
i like to use split() to grab middle-chunks instead of more complex RegExps:
var strFormHTML='<input type="text" name="contact[email]" /><input type="text" name="contact[address][street]" />';
var names = strFormHTML.split(/[\W\w]+? name=\"([^"]+)\"[\w\W]+?/).filter(Boolean).slice(0,-1);
alert(names); //shows: "contact[email]", "contact[address][street]"

Categories