My goal is to write content in a textarea and display exactly what I am writing without have to refresh the page each letter that I type shows immediately well it is not working for some reason.
HTML:
<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>
Js:
function generate() {
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(text);
text = writer.render();
document.getElementById("out").innerHTML = text
}
document.getElementById("Q&A").addEventListener("input", function () {
generate(this.value);
});
When I try to update the div with the id of out to what I am typing using JavaScript, it does not work.
I don't know what the commonmark.Parser() does in your code. But the issue i see is, When you are calling the generate method, you are passing the value of the input field. But in your generate method signature, you don't have a parameter to accept that.
Add a parameter to your generate() method to accept the value passed in.
function generate(text) {
//do something else on text with your commonmark
document.getElementById("out").innerHTML = text;
}
Here is a working sample.
and you forgot to pass the argument parsed to the render function:
You had: text = writer.render(); I changed it to text = writer.render(parsed);
I figured it out i forgot to have text pasted in as a argument in the generate function and I forgot to pas parsed into the render function
Here is the final code:
function generate(text) {
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(text);
text = writer.render(parsed);
document.getElementById("out").innerHTML = text
}
document.getElementById("Q&A").addEventListener("input", function () {
generate(this.value);
});
Related
I have a textarea in which I am getting user's input data. But I need to know if there is any URL in textarea and convert it to anchor tag. For example:
Textarea Data:
Hi I'm Abdul. My Website is https://website.com
After Anchor Tag:
Hi I'm Abdul. My Website is https://website.com
Currently my code is:
var status = $('#status').val();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
}
This is my current code but I don't know how to replace url with anchor tag in that string.
I am not sure if i understand you correctly, but do you want to have it changed live or after the form was sent? If the latter, i would try something like this:
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
// Here my possible solution (not tried out)
$('#status').val('<a href="http://'+urlCheck.exec(status)[0]+"' target='_blank'>the link</a>");
}
But this would also mean that you could/must check with a RegEX if the user entered http or not.
var status = $('#status').text();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("It has an URL!");
console.log(urlCheck.exec(status)[0]);
}
document.getElementById("status").innerHTML = status.replace(urlCheck.exec(status)[0],"<a href='"+urlCheck.exec(status)[0]+"'>"+urlCheck.exec(status)[0]+"</a>");
<div id="status">Hi I'm Abdul. My Website is https://website.com</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
We can use the html.replace() to replace the url inside the tags we wanted.
You have to use the JS replace() function.
I set the following example with an input textarea and an output textarea for let you see the difference.
function addUrl() {
var status = $('#status').val();
var urlCheck = /(([a-zA-Z0-9]+:\/\/)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+#)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(\/.*)?)/;
$('#output').val(status.replace(urlCheck, '$1'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="status">Input</label>
<textarea id="status" onChange="addUrl()"></textarea>
<br/>
<label for="output">Output</label>
<textarea id="output"></textarea>
use linkifyHtml or linkifyString : Linkify String Interface. Use linkify-string to replace links in plain-text strings with anchor tags.
I want to extract a string from a text file, convert it to a word scrambler (I figured out that part) and output it in another text file.
I found some code to input a text file and extract the text:
<html>
<h4>Select un file con .txt extension</h4>
<input type="file" id="myFile" accept=".txt" />
<br /><br />
<div id="output"></div>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener("load", function (e) {
output.textContent = e.target.result;
});
reader.readAsText(myFile);
}
});
</script>
</html>
Input text and extract a text file
<html>
<div>
<input type="text" id="txt" placeholder="Write Here" />
</div>
<div>
<input type="button"id="bt"value="Save in a File"onclick="saveFile()"/>
</div>
<script>
let saveFile = () => {
const testo = document.getElementById("txt");
let data = testo.value;
const textToBLOB = new Blob([data], { type: "text/plain" });
const sFileName = "Testo.txt";
let newLink = document.createElement("a");
newLink.download = sFileName;
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
newLink.click();
};
</script>
</html>
But I don't know how to output a string in the first code or how to connect it to the second code. Could someone please show me how to do it or explain how these codes work so that I could try to do it myself in JavaScript?
I will comment each line of JavaScript, that should help you understand.
<script>
/*This creates a global variable with the HTML element input in it. */
var input = document.getElementById("myFile");
/*This creates a global variable with the HTML element div with id output in it. */
var output = document.getElementById("output");
/* this 2 lines are used to set the source and the destination.
The first will get where you put your file, in this case it's the input element.
The second will get the div which content will be replaced by the content of your txt file. */
/* Here we tell to our input element to do something special when his value changes.
A change will occur for example when a user will chose a file.*/
input.addEventListener("change", function () {
/* First thing we do is checking if this.files exists and this.files[0] aswell.
they might not exist if the change is going from a file (hello.txt) to no file at all */
if (this.files && this.files[0]) {
/* Since we can chose more than one file by shift clicking multiple files, here we ensure that we only take the first one set. */
var myFile = this.files[0];
/* FileReader is the Object in the JavaScript standard that has the capabilities to read and get informations about files (content, size, creation date, etc) */
var reader = new FileReader();
/* Here we give the instruction for the FileReader we created, we tell it that when it loads, it should do some stuff. The load event is fired when the FileReader reads a file. In our case this hasn't happened yet, but as soon as it will this function will fire. */
reader.addEventListener("load", function (e) {
/* What we do here is take the result of the fileReader and put it inside our output div to display it to the users. This is where you could do your scrambling and maybe save the result in a variable ? */
output.textContent = e.target.result;
});
/* This is where we tell the FileReader to open and get the content of the file. This will fire the load event and get the function above to execute its code. */
reader.readAsText(myFile);
}
});
</script>
With this I hope you'll be able to understand the first part of this code. Try putting the second part of your code instead of output.textContent and replacing data with e.target.result, that should do what you wish, but I'll let you figure it out by yourself first, comment on this answer if you need further help !
Here's a codepen with working and commented code:
https://codepen.io/MattDirty/pen/eYZVWyK
I am trying to hash data using JavaScript. When I run the first code it will hash using document.write. Now I try the second code to hash by content id it didn't work. Can anyone explain why?
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script>
var hash = CryptoJS.SHA256("hello");
document.write(hash.toString(CryptoJS.enc.Hex));
</script>
using this first method will work very fine
2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824
<script>
var hash = CryptoJS.SHA256;
var it = (hash.toString(CryptoJS.enc.Hex));
document.getElementById('hashit').innerHTML = 'it';
</script>
<p id="hashit">Hello</p>
If you want to hash something in-place in an element then you need to read out the value/text, hash it and write the text back:
var element = document.getElementById('hashit');
var hash = CryptoJS.SHA256(element.innerHTML);
element.innerHTML = hash.toString();
Here is a runnable snippet which changes the value after 2 seconds.
setTimeout(function(){
var element = document.getElementById('hashit');
var hash = CryptoJS.SHA256(element.innerHTML);
element.innerHTML = hash.toString();
}, 2000);
<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/sha256.js"></script>
<p id="hashit">Hello</p>
Keep in mind that JavaScript is not like PHP. You can't simply use variables in strings like this element.innerHTML = 'it';. You have to useelement.innerHTML = it;.
I have a list in one file html called "filed1":
<ul>
<li>Nombre:<a class="boton" onclick=move() title="Caja">Caja</a><br>
<FONT SIZE=2>Fecha: 21/12/1994</font></font></li>
</ul>
Now I want to change a string in other html "filed2":
<a id="logo-header2">
<h1>
<span class="site-name" id="element">Details</span><br>
</h1>
</a>
Using Java Script:
function move() {
mywindow = window.open("file2.html");
mywindow.document.getElementById("element").innerHTML="Changed");
}
But there is an error which says that mywindow.document.getElementById("element") is NULL, why? The id element exists in the other window. Is there another way to change the string?
The problem is that you are trying to retrieve the DOM element before the window is loaded.
Try following
mywindow.onload = function() {
mywindow.document.getElementById("element").innerHTML="Changed";
}
Like #nikhil mentioned, mywindow is undefined when you're calling it, and you'll need to place your code into something triggered by the onload event.
Another approach you can try is perhaps passing the string as a variable in the url, like so:
function move(){
window.open("file2.html?str=Changed");
}
And then in file2.html, try something that runs on page load:
window.onload = function(){
var str = $_GET('str');
document.getElementById("element").innerHTML = str;
};
function $_GET(q){
var $_GET = {};
if(document.location.toString().indexOf('?') !== -1){
var query = document.location
.toString()
.replace(/^.*?\?/, '')//Get the query string
.replace(/#.*$/, '')//and remove any existing hash string
.split('&');
for(var i=0, l=query.length; i<l; i++){
var aux = decodeURIComponent(query[i]).split('=');
$_GET[aux[0]] = aux[1];
}
}
return $_GET[q];
}
The $_GET function I included is just for getting query string parameters, and function much like $_GET[] in php.
I have MVC controller that returns a list containing a search string.
public ActionResult GetList(string searchString)
{
ViewData["searchString"] = searchString;
if (String.IsNullOrEmpty(searchString))
{
var persons = db.Persons.ToList();
return View(persons);
}
else{
var persons = db.Persons.Where(p=> p.Title.Contains(searchString)).ToList();
return View(persons);
}
}
In the view the list is displayed in a table. I want to highlight the searchString (or at most the td that contains the searchString). The following is my jquery where I attempted to achieve this. I have tried putting this bit of code in a separate .js script or in the view itself and I have also tried to change the code in several ways but it wouldn't work. It appears like the searchString remains null even if the content of my ViewData has changed.
$(document).ready(function () {
var textToHighligt = #ViewData["searchString"];
$("#simpleSearchButton").click(function () {
$("td:contains(textToHighligt)").css("background-color", "yellow");
});
});
I think this:
var textToHighligt = #ViewData["searchString"];
$("td:contains(textToHighligt)").css("background-color", "yellow");
should be concatenated:
var textToHighligt = '#ViewData["searchString"]'; //<---put in quotes
$("td:contains("+textToHighligt+")").css("background-color", "yellow");
I think you can do otherwise if it is not happening in the javascript file , create a hidden field and populate the value from the ViewBag
#Html.Hidden("hiddensearchString", (string)ViewBag.searchString)
For the ViewData
#Html.Hidden("FirstName", ViewData["searchString"])
and then the javascript read the value like this
var searchString = $("#hiddensearchString").val();
In you code you can also try this using of the single quote.
var textToHighligt = '#ViewData["searchString"]';