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>
Related
I wan to print text like this in an HTML file, what tags do you suggest?
'text \nwithout \nformatting '
My js code
const editor = document.getElementById('editor')
const previewer = document.getElementById('previewer')
editor.addEventListener('change', () => {
previewer.textContent = editor.value
})
My HTML code
<textarea id="editor" name="" cols="30" rows="10"></textarea>
<pre id="previewer"></pre>
I tried with the deprecated <plaintext>, and the <pre> tags, i expect to print text without formatting tags like \n and others
I am not clear if you want to show newlines as newlines in your previewer, or if you want to remove \n (which represents an escaped newline) in the textarea. In any case, this solution does both:
const editor = document.getElementById('editor');
const previewer = document.getElementById('previewer');
editor.addEventListener('input', () => {
previewer.innerHTML = editor.value.replace(/\\n/g, '');
});;
editor.dispatchEvent(new Event('input'));
<textarea id="editor" name="" cols="50" rows="5">text with
newlines
and escape char \n representing a newline</textarea>
<pre id="previewer"></pre>
Notes:
use 'input' instead of 'change' in the event listener, so that an update happens on each keystroke
.replace(/\\n/g, '') on the textarea value strips the escape chars
use previewer.innerHTML so that newlines in the textarea are preserved
the .dispatchEvent() makes sure to show the previewer initially in case you have initial text in the textarea
I'm making art web project where I wan't to replace user inputed text to my own phrases in infnity.
Similar way like in game "Emily is away", but that will be only one phrase repeat in infinity.
Something like this:
"text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text"
When user will be typing, the result will be always the same phrase.
My code looks this way:
function myFunction() {
result.innerHTML = "TEXT";
}
<input type="text" onkeydown="myFunction()">
<div id="result"></div>
I will be really glad for help.
Is this what you mean? It will append the string to the existing output, rather than replacing it:
function myFunction() {
result.innerHTML += "TEXT ";
}
<input type="text" onkeydown="myFunction()">
<div id="result"></div>
let myInput = document.querySelectorAll('input');
myInput.forEach(input => {
input.addEventListener('keydown', function() {
result.innerHTML += "TEXT ";
});
})
<input type="text">
<div id="result"></div>
How do I create a function that extracts the text from the textarea and divides it into the individual words and puts all the words in an array?
<body>
<textarea name="text" id="" cols="30" rows="10" id="textarea"></textarea>
<button id="button">Click</button>
<script src="script.js"></script>
</body>
This is what i got :P Been stuck for a while now. Can't figure out what to do. Pleas help.
var btn = document.getElementById("button");
btn.addEventListener("click", getText);
function getText(){
}
</script>
You have 80% done :-)
Now you need to get the value from the textarea, replace the spaces with this regexp /\s+/ (this is just to replace consecutive spaces) and then split the text by ' ' (single space)
var btn = document.getElementById("button");
btn.addEventListener("click", getText);
var array;
function getText() {
var textarea = document.getElementById('text');
array = textarea.value.replace(/\s+/g, ' ').split(' ').filter((e) => e.length > 0);
console.log(array);
}
<textarea name="text" id="text" cols="30" rows="10" id="textarea">Hello World</textarea>
<button id="button">Click</button>
See? now you're getting the values into an array.
UPDATED: According to #phil the g modifier is necessary to avoid inconsistent with new lines at first position.
function getText(){
var text = document.getElementById("textarea").value;
var words = text.split(/\s+/);
return words;
}
The value gets text from textarea and Split breaks text into words using spaces.
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.
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>