Javascript replace function "is not a function" - javascript

I have an issue with the following code. I want to replace a string by another one, and generate an img code. However, I got an error message: str.replace is not a function. Any idea why?
<input type="text" id="text">
<input type="button" value="See Code" onclick="myFunction();">
<input type="text" id="code" name="code">
<script>
function myFunction() {
var str = parseInt(document.getElementById("text").value);
var res = str.replace("ftpadress", "htmladress");
var code = str.concat("<img src='",res,"' width='100%'>");
document.getElementById("code").value = code;
}
</script>

As #mrlew pointed out,
str is result of parseInt and therefore, it's a number. replace() is a string method, so it will not work on a number.
If I understood correctly, you would like to replace a string, retrieve a code and then generate an image tag with the new string and code.
I'd go with...
<input type="text" id="text" />
<input type="button" value="See Code" onclick="myFunction();">
<input type="text" id="code" name="code">
<script>
function myFunction() {
//changed
var str = document.getElementById("text").value; //get text
var res = str.replace("ftpadress", "htmladress"); //replace
var code = parseInt(str).toString(); //get code and cast it back to a string
document.getElementById("code").value = code; //insert code
var withTag = code.concat("<img src='", res, "' width='100%'>"); //generate tag
}
</script>

parseInt returns an integer not a string so you can not use str.replace() , you need to cast it first
just add str = str.toString(); before using the replace function

Just remove the casting (parseInt function) and everything should work fine.
<input type="text" id="text">
<input type="button" value="See Code" onclick="myFunction();">
<input type="text" id="code" name="code">
<script>
function myFunction() {
//changed
var str = document.getElementById("text").value;
console.log(str);
var res = str.replace("ftpadress", "htmladress");
var code = str.concat("<img src='",res,"' width='100%'>");
document.getElementById("code").value = code;
}
</script>

Related

How can I remove input tags from a string using jQuery? This string contains other html tags as well

this is the string:
Hi <input type="text" placeholder="Person Full Name">,<span><br></span><span><br></span><span><span>This is a sample email template for </span></span><input type="text" placeholder="Deal Title"> associated with <input type="text" placeholder="Deal Owner"><span><br></span><span><br></span><span><span><br></span></span><span><span><span>Regards,</span></span></span><span><span><span><span><br></span></span></span></span><input type="text" placeholder="Organization Name"><span><br></span><span>dlkgmffkgmkm </span><input type="text" placeholder=""> dslkfmlgdmglkfnkl <input type="text" placeholder=""><br>
I am also using an Editor in my textarea.
$(".btn-removehtml").click(function() {
html = $('.email-textarea').Editor("getText");
replaceInput = html.find('input').replaceWith(function() {
return this.innerHTML;
}).end().html();
});
You can try this..
var string = '<input type="text" placeholder="Person Full Name">,<span><br></span><span><br></span><span><span>';
var newString = $(string).not('input');
$('body').append(newString);
For all use input you can do this.
var newString = $(string).find('input').remove().end();
call the below function to replace the all the input in to static value "abcd"
function parseEmailTemplate(html) {
let myRegex = /<input\s[^>]*>/gi;
let match = myRegex.exec(html);
if (match) {
value="abcd";
html = html.replace(match[0], value);
html = parseEmailTemplate(html);
}
return html;
}

Trim and remove number function and add to input

I took some code from W3Schools and edited it to remove numbers and trim leading and trailing whitespace. That works as expected and I’m happy with how it removes spaces and numbers.
I tried var str = myTrim(#input-q5); but was unable to get it working. not sure how to proceed.
function myTrim(x) {
return x.replace(/\d+|^\s+|\s+$/g, '').trim();
}
function myFunction() {
var str = myTrim("7987 iuiuh 98798");
alert(str);
$(str).val($('#input-q6').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input-q5" Value="345 King Street">
<input type="text" id="input-q6">
<button onclick="myFunction()" id="test">Try it</button>
Below is a working snippet, first get the value and store it in val then assign it using the same function!
function myTrim(x) {
return x.replace(/\d+|^\s+|\s+$/g, '').trim();
}
function myFunction() {
var val = $('#input-q5').val();
var str = myTrim(val);
$('#input-q6').val(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input-q5" Value="345 King Street">
<input type="text" id="input-q6">
<button onclick="myFunction()" id="test">Try it</button>
Please Try This:
function myTrim(x) {
return x.replace(/\d+|^\s+|\s+$/g,'').trim();
}
function myFunction() {
var str = myTrim($('#input-q5').val());
alert(str);
}

Is it possible to get only the first letter of what is written in the input?

I want to get only the first letter of what is written in the input. Can help me?
<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>
<script type="text/javascript">
function copyText(texteId, text1Id) {
var data = document.getElementById(texteId).value;
document.getElementById(text1Id).innerHTML = data;
}
</script>
Yes you can split the variable data as an array:
function copyText(texteId, text1Id) {
var data = document.getElementById(texteId).value[0];
document.getElementById(text1Id).innerHTML = data;
}
<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>
Use [number] to get the value at some point.
Or you could use the slice() function:
function copyText(texteId, text1Id) {
var data = document.getElementById(texteId).value;
document.getElementById(text1Id).innerHTML = data.slice(0,1);
}
<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>
Or as suggested in the other answer charAt().
Use charAt(0) to get the first character:
function copyText(inputId,displayId) {
var data = document.getElementById(inputId).value;
var firstLetter = data.charAt(0);
document.getElementById(displayId).innerHTML = "The first letter is: " + firstLetter;
}
<label for ="texte">Type your name here</label>
<input id="texte" type="text" onkeyup="copyText('texte','text')">
<p id="text"></p>
function copyText( texteId, text1Id ) {
var d = document;
d.g = d.getElementById;
var data = d.g( texteId ).value[0];
d.g( text1Id ).innerHTML = data;
}
<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>
In JavaScript you may treat a string as if it were an array. So by specifying the zeroeth index of value, the code grabs the first letter and that becomes the content of the div with the id of "text" using that element's innerHTML property.
const input = document.querySelector('#texte');
const text = document.querySelector('#text');
// keydown and keyup are alternate events
input.addEventListener('input', function() {
text.innerHTML = this.value[0];
});

Sort Number in a Textbox on Ascending order using keypress function - HTML

Hi I'm new in the community.
I am trying to create a simple page where in there are 3 textbox. 1st text box is where the number will be entered. For 2nd and 3rd textbox is where the result will be shows on a different format as soon as the numbers are entered from the 1st textbox. 2nd text box should show the number with a comma which I was able to do. Example: As soon as I enter a number on the first text box 22 55 01 02 the 2nd text box will show 22,55,01,02 however on the 3rd textbox it should show the same number from 2nd textbox but on Ascending order which I weren't able to do so. Tried searching for a solution already but to now avail. Maybe I am just missing something. Any help will be very much appreciated.
function boxx1KeyPress() {
var boxx1 = document.getElementById("boxx1");
var s = boxx1.value.replace(/[ ,]+/g, ",");
var x = s;
var lblValue = document.getElementById("boxx2");
lblValue.value = "" + s;
// code for textbox 3 that didn't work
//function sortAscending(a, b)
//{return a - b;
// }
//var points = boxx3.value;
//points.sort(sortAscending);
//document.getElementById("boxx3").innerHTML = points;
}
function ClearField() {
document.getElementById("boxx1").value = "";
document.getElementById("boxx2").value = "";
document.getElementById("boxx3").value = "";
}
<body>
<B><br><center>PASTE HERE</br>
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()"
onKeyUp="boxx1KeyPress()">
<br>
<input type="button" Value="Clear Field" onClick="ClearField()">
<br>
<br>11x5 GAMES</BR>
<span id="lblValue"></span>
<input id="boxx2" type="text">
<br>
<br>Keno Games</br>
<input id="boxx3" type="text">
<br>
<p id="Keno"></p>
<input type="button" Value="Ascend" onClick="points.sort(sortAscending)">
</body>
It's actually incredibly simple to sort numbers in JavaScript. All you need to do is:
Split the initial string into an array with .split(" ") (splitting on a space).
Sort the numbers with .sort().
Join the numbers back to a string with .join().
Keep in mind that as the output box is an <input>, you'll need to use .value instead of .innerHTML:
function boxx1KeyPress() {
var boxx1 = document.getElementById("boxx1");
var s = boxx1.value.replace(/[ ,]+/g, ",");
var x = s;
var lblValue = document.getElementById("boxx2");
lblValue.value = "" + s;
// Fixed code for sorting the numbers
var points = boxx1.value.split(" ");
document.getElementById("boxx3").value = points.sort().join();
}
function ClearField() {
document.getElementById("boxx1").value = "";
document.getElementById("boxx2").value = "";
document.getElementById("boxx3").value = "";
}
<body>
<br>
<center>
<b>PASTE HERE</b>
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" onKeyUp="boxx1KeyPress()">
<br>
<br>
<input type="button" Value="Clear Field" onClick="ClearField()">
<br>
<br>
11x5 GAMES
<span id="lblValue"></span>
<input id="boxx2" type="text">
<br>
<br>
Keno Games
<input id="boxx3" type="text">
<br>
<p id="Keno"></p>
<input type="button" Value="Ascend">
</center>
</body>
Also note that you had some slightly invalid HTML in your above snippet (primarily that <br> is a void element, so the tag self-closes and thus </br> is not valid). I've cleaned up the HTML in my snippet above.
Hope this helps! :)
Your main issue is that you are trying to sort something that is still a string... you have to make your string into an array first.
function boxx1KeyPress() {
var boxx1 = document.getElementById("boxx1");
var s = boxx1.value.replace(/[ ,]+/g, ",");
var x = s;
var lblValue = document.getElementById("boxx2");
lblValue.value = "" + s;
// get an array from our string s
var arr = s.split(',');
arr.sort(); // note that for strings or ints, the default sort is ascending
document.getElementById("boxx3").innerHTML = arr.join(',');
}
I used the String.split method to get an array, separated at the commas, and the Array.join method to turn it back into a string after it was sorted.
Convert comma separated string into Array. Use array sort function and you done.
function boxx1KeyPress() {
var boxx1 = document.getElementById("boxx1");
var s = boxx1.value.replace(/[ ,]+/g, ",");
var lblValue = document.getElementById("boxx2");
lblValue.value = "" + s;
}
function sortDisending() {
var numberArray = document.getElementById("boxx2").value.split(",");
numberArray.sort(function(a, b){return b-a});
document.getElementById("boxx3").value = numberArray;
}
function sortAsending() {
var numberArray = document.getElementById("boxx2").value.split(",");
numberArray.sort(function(a, b){return a-b});
document.getElementById("boxx3").value = numberArray;
}
function ClearField() {
document.getElementById("boxx1").value = "";
document.getElementById("boxx2").value = "";
document.getElementById("boxx3").value = "";
}
<B><br><center>PASTE HERE
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()"
onKeyUp="boxx1KeyPress()">
<br>
<br>
<br>11x5 GAMES
<span id="lblValue"></span>
<input id="boxx2" type="text">
<br>
<br>Keno Games
<input id="boxx3" type="text">
<br>
<p id="Keno"></p>
<input type="button" Value="Ascend" onClick="sortAsending()">
<input type="button" Value="Descend" onClick="sortDisending()">
<input type="button" Value="Clear Field" onClick="ClearField()">

Converting an integer into a string array and outputting it

I want to change my input an Integer into a String array. I used javascript to write such a function but unfortunately it doesnt work. I tried everything i know but i have no clue what i did wrong. Would appreciate some help/explanations etc. Here is the code.
<script type="text/javascript">
function convert() {
var umge = document.getElementbyId('eingabe').value;
if(umge == 0005010) {
var aus = {"Maria", "Nord", "1a", "VS Langenzersdorf"};
var myJSON = JSON.stringify(aus);
document.getElementById('output').innerHTML = myJSON;
document.getElementById('input').innerHTML = "";
}
}
</script>
</head>
<body bgcolor="orange">
<form action="" method="post">
<input type="text" name="input" id="input" value="0005010">
<input type="submit" value="Umwandeln" onclick="convert();">
<p name="output" id="output"> Kein Wert</p>
</form>
</body>
</html>
Other than the problems mentioned in the comments, your declaration of aus is wrong: an object should be {k1:"v2"} and an array should be ["v1","v2"].
Also, your input box is type text, so its value is a string, not a number, so you need to compare it to a string. I cleaned up your code into something runnable here : https://plnkr.co/edit/Sny3LuBDGh0ZKHY0lSWx?p=preview
Basically you should either do this :
var umge = document.getElementById('input').value;
if(umge == "0005010") { .... }
Or something like this :
var umge = parseInt(document.getElementById('input').value);
if(umge == 5010) { .... } // note - no leading 0s!

Categories