Simple Javascript on html textbox conversion. Doesn't work twice - javascript

I'm using the replace method and if I type in "test test" only the first test gets converted to good so it'll become "good test". I'm at a loss on why this is happening. On a side question, if I was to add 20 other words that I would like to replace, would I have to create 20 different str.replace?
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace "Test" with "Good"</p>
<textarea id="firstbox"></textarea>
<textarea id="secondbox"></textarea>
<button onclick="myFunction()">Change</button>
<script>
function myFunction() {
var str = document.getElementById("firstbox").value.toLowerCase()
var res = str.replace("test", "good");
document.getElementById("secondbox").value = res;
}
</script>
</body>
</html>
Any help would be greatly appreciated

Use regex, change "good" to /good/g
function myFunction() {
var str = document.getElementById("firstbox").value.toLowerCase()
var res = str.replace(/test/g, "good");
document.getElementById("secondbox").value = res;
}
<p>Click the button to replace "Test" with "Good"</p>
<textarea id="firstbox"></textarea>
<textarea id="secondbox"></textarea>
<button onclick="myFunction()">Change</button>

Related

How to split string from particular word in javascript?

[
{
docPath: "c:\Project\Indofebweb\Attachment\images\indofab.png",
}
]
I want to split the string from \Attachment and get the rest of the string e.g
\Attachment\images\indofab.png . How can I do this?
For this particular string you can use :
var arr=test.split("Indofebweb");
var restString=arr[1]; //-----contains string \Attachment\images\indofab.png
You can make your own logic using split() function.
UPDATED CODE----TRY THIS----BELOW HTML
<!DOCTYPE html>
<html>
<body>
<p> a string display :</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "c:\\Project\\Indofebweb\\Attachment\\images\\indofab.png";;
var arr=str.split("Indofebweb");
document.getElementById("demo").innerHTML = arr[1];
}
</script>
</body>
</html>
use str.match()
path.match(/\\Attachment.*/);
this will return everything after and including "\Attachment". Keep in mind that backslashes need to be escaped.

How to Title Case a sentence in Javascript

<html>
<head>
<!--Wei Wu Section A-->
<title>This is the 4th extra credit</title>
</head>
<body>
<script type="text/javascript">
function toUpper(stringFromUser){
var arrayOfStrings = [];
arrayOfStrings = stringFromUser.split(" ");
for(i=0;i<arrayOfStrings.length;i++){
//if (char(arrayOfStrings[i][0]) <= 122 && char(arrayOfStrings[i][0]) >= 97){
if (arrayOfStrings[i].charCodeAt(0) <=122 && arrayOfStrings[i].charCodeAt(0) >=97){
arrayOfStrings[i] = arrayOfStrings[i].charAt(0).toUpperCase() + arrayOfStrings[i].slice(1);
}
}
var afterTitle = "";
afterTitle = arrayOfStrings.join(" ");
document.getElementById('afterChange').innerHTML = afterTitle;
}
</script>
<p>Enter a sentence and I will turn it into Title Case!<input id="textInput" value=""></p>
<button onclick="toUpper(textInput.value)">Change case!</button>
<p id="afterChange"></p>
</body>
</html>
Hi thank you in advance for all your help. this is one of the code that I was working on. the purpose of this code is to "Title Case" the first letter of each word in the sentence. My code runs quite well after some work.
But I have one question: On line 14, I was trying to directed assign the uppercase letter to arrayOfString[i][0], it didn't work. Instead, I changed the whole element, AKA the element in the array. Why didn't that work? Thank you very much!
Strings are immutable - you cannot change individual characters in them by assigning to their [] indicies. So, you have to slice them apart and put them back together, as you did.
You can use this code to Title Case
<html>
<head>
<!--Wei Wu Section A-->
<title>This is the 4th extra credit</title>
</head>
<body>
<script type="text/javascript">
function toUpper(stringFromUser){
var afterTitle = toTitleCase(stringFromUser);
document.getElementById('afterChange').innerHTML = afterTitle;
}
function toTitleCase(str)
{
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
</script>
<p>Enter a sentence and I will turn it into Title Case!<input id="textInput" value=""></p>
<button onclick="toUpper(textInput.value)">Change case!</button>
<p id="afterChange"></p>
</body>
</html>

split hindi word maintaining conjuncts using javascript

i am trying out bellow code
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "कसौटी";
var res = str.split("");
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
my result should be क, सौ, टी
however it turns out to be क,स,ौ,ट,ी
what exactly can be done to get the above result
is there a way to split hindi character while maintaing the conjuncts
any way in which we split utf -8 encoded characters then merge them back to get above result
please provide details in code , on how exactly it can be done

onkeyup event in textarea

I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>

How to change an html tag with Javascript? [duplicate]

This question already has an answer here:
dynamically changing HTML tag
(1 answer)
Closed 9 years ago.
I want to display the text from a string into an HTML tag without moving to next page and display it.
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
document.write(str);
}
</script>
</div>
</body>
How do I edit the contents of the label tag?
Common …
document.getElementById('lbl1').innerHTML = str;
function display() {
var str="Hello World";
var label = document.getElementById('lbl1');
label.innerHTML = str;
}
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerText = str;
}
</script>
</div>
</body>
When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".
Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:
function display()
{
var str="Hello World";
return str;
}
You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.
You could also modify your display() function a little bit to get the desired result:
function display()
{
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerHTML = str;
}
Another way:
window.onload = function()
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.
Let's provide a complete example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<label id="lbl1">Label </label>
<button id="btn1">Click </button>
</body>
</html>
Then inside the JavaScript file you just register various events:
//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.

Categories