Generating a string literal from text in JavaScript - javascript

<html>
<script>
function printStringLiteral(theInput) {
document.body.innerHTML += JSON.stringify(theInput.value)
}
</script>
<body>
<p>Text to modify:<p>
<input type="text" id = "textInput">
<a onclick="printStringLiteral(document.getElementById('textInput'));" href="javascript:void(0);">Get string literal</a>
</body>
</html>
I'm trying to create a simple web page that accepts text as input and returns a string literal, but this web page doesn't display the string literal correctly after it has been generated. I entered <p>"Hi!"</p> as input, but "\"Hi!\"
was displayed as output, instead of the correctly formatted string literal. What will I need to do here in order to get the string to display properly?

Instead of setting the innerHTML, set the text
function printStringLiteral(theInput) {
document.body.textContent += JSON.stringify(theInput.value)
}
If you need to support IE8- you need to set innerText too

Related

Understanding the specifics of the jquery text() with HTML Entities

I have trouble understanding the specific of the jquery text() function in combination with HTML Entities. It seems to be that the text() function converts special HTML Entities back to normal characters. In particular, I am unsure how this code snippet behaves:
$(document).ready(function() {
var value = $("#test").text();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<h1> test </h1>
</div>
since the output seems to be a string where HTML Entities are unescaped. Does this mean that the text() function unescapes HTML Entites?
EDIT/FOLLOW UP:
Since text() seems to only return the real text content, I have trouble understanding this code snippet, which returns an unescaped . If text() returns the escaped string, why does the html function return a formatted one?
$(document).ready(function() {
var value = $("#test").text();
console.log(value);
$("#test").html(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<h1> test </h1>
</div>
text() isn't doing anything special. The browser itself translates entities into their rendered characters when it parses the original HTML. So when you write <h1> in the HTML, the browser converts this to the literal string <h1>. .text() simply returns this text.
When you then use .html(), this causes the string to be parsed as HTML, so <h1> is rendered as an HTML tag, and you get the formatted result.
If you look at the source you'll see that it is pulling out the textContent from elements.
https://j11y.io/jquery/#v=git&fn=jQuery.fn.text
Some documentation of what textContent is:
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
$(document).ready(function() {
var value = $("#test").text();
console.log(value);
//https://j11y.io/jquery/#v=git&fn=jQuery.fn.text
console.log($("#test").get(0).textContent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<h1> test </h1>
</div>

How can we get a string value from js file to HTML? [duplicate]

This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";

Add IpRange value to input dynamically

I want to add an input field the user can enter/modify an IP Address in the format 198.162.0.0/45 representing a range from 198.162.0.0 - 198.162.0.45
what I have almost works but its not allowing the complete correct format. If I enter any of the following it works fine.
198/45, 198.168, or 198.168.0.45
but as soon as I try to add
198.168.0/24 or 198.168.0.0/24
I wanted to be able to add 198.168.0.0/24 without having to breakup the fields but if I have to I can.
it gets a scripting error when my dynamic element is appended to the div tag containing the input fields.
basically my setup is this, empty div tag I will append the following to. The newIpRange comes in as a string such as 198.168.0.0/24
EDIT with test html that produces the issue
<html>
<head>
<title>Test IP</title>
<script type="text/javascript">
function onload(range){
var e = document.getElementById("_main");
e.innerHTML = getTag(range);
}
function getTag(range){
return "<div class='input-append' ><input type='text' value='" + range + "' ></input><div>";
}
</script>
</head>
<body onload="onload(198.168.1.0/24);">
<div id="_main" >
</div>
</body>
</html>
what would be causing this? of interest to me really is why does it give the error in some cases, not others
Here is the Error I'm getting from the script when I appent this line: SCRIPT1006: Expected ')'
After spending a little time with the sample I made I finally came to the realization, its how javascript is parsing the values.
in the case of 10.12/24 its evaluating it as a number with a division
as soon as I add the extra period in there it can no longer evaluate it as a number, to solve that putting it in a string literal cleans everything up!
to fix this I put the ipcallback into a pair of single quotes to tell javascript its a string
<script>
</head>
<body onload="onload('198.168.1.0/24');">
<div id="_main" >

Change case to lowercase in JS text area

How do I change the case of a character in a textbox/textarea to lowercase onchange?
<html>
<head>
<title>Page Title</title>
<script>
function f2(string)
{
string=string.toUpperCase();
alert(string);
}
</script>
</head>
<body>
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea onchange='f2(this.value);'></textarea>
</p>
</form>
</body>
Have you tried;
function f2(textarea)
{
string = textarea.value;
alert(string);
string = string.toLowerCase();
textarea.value = string;
}
With the modification to the onChange as;
<textarea onchange='f2(this);'></textarea>
Simply change the value and assign it back.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>
Because nobody fixed your code
HTML:
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea></textarea>
</p>
JS:
document.getElementsByTagName("textarea")[0].addEventListener("change", function () {
this.value = this.value.toLowerCase();
});
You want to add a change event handler. Inside the event handler you merely overwrite the value property of the element with the string changed to lowerCase.
I also fixed your in-line javascript in your HTML. It is the devil, avoid it.
Live Example
Just use the .toLowerCase() method.
Use onchange='this.value = this.value.toUpperCase();' to make the text uppercase. Replace toUpperCase with toLowerCase for the opposite.
If desired, you can use your own function instead of just toUpperCase, passing either just the textarea's value or the entire textarea. For example (value only):
<!-- HTML -->
<textarea onchange='this.value = f2(this.value);'></textarea>
// JavaScript
function f2(oldText) {
var newText = oldText.toUpperCase();
return newText;
}
Or (entire textarea):
<!-- HTML -->
<textarea onchange='f3(this);'></textarea>
// JavaScript
function f3(ta) {
ta.value = ta.value.toUpperCase();
}
I would pass this and then work on it like a DOMNode:
<p>Here are my text entry objects:</p>
<form>
<p>
Change the scripting (still using one function) so that the text from the alert is shown in uppercase from the textbox but lowercase from the textarea:<br>
<textarea onchange='f2(this);'></textarea>
</p>
</form>
function f2(el) {
el.value = el.value.toLowerCase();
}
http://jsfiddle.net/HDR8t/1
Problem 1
I believe the onchange event only gets fired when the <textarea> no longer has focus. Instead, you'll want to use the onkeyup event.
Problem 2
You're only passing the string to the function. If you want to change the actual text in the <textarea>, you'll need to pass the actual DOM element to your function:
<textarea onkeyup="f3(this)"></textarea>
Problem 3
Once you pass the element into your function, you'll need to update its value attribute:
function f3(elem) {
elem.value = elem.value.toLowerCase();
}
Try the [.toLowerCase()][1] method.
<textarea onchange='this.value=this.value.toLowerCase();'></textarea>

JavaScript encryption

the script has to search a string inside the webpage. but that script should not display what string that it is searching. I mean the search string should be in encrypted format or any other format.
but without that search string the webpage should not be displayed or it should display an error on page.
I am going to develop a plugin. If anybody using that plugin in their webpage they must and should place my name or my website name in that page.
is it possible, if so how to encrypt my text (srikanth) inside the script and how to search that string inside the page.
how many possibilities are there to place my name in a webpage with javascript or jquery but it should not visible as it is when anybody check it in source code
There is no way of hiding your name. If the browser can see it, then so can any user.
You can encrypt your name anyway you like. But of course it needs to be decrypted client-side to actually do the search. So anyone with a javascript debugger could uncover your name in moments.
Or slightly more obscurity you could hash your name server-side, in javascript hash the page contents, and then do your search. Given a decent hash the chance of collisions will be small. However, with a debugger you could still figure out the search string no problem. And to be honest this just sounds absurd.
Whatever you're trying to achieve needs to be re-thought.
Anyone can view Javascript source code, therefore it's not really possible to encrypt something using Javascript in a way that is secure. You can obfuscate it, often in horrible ways, but it's always possible to reverse.
If you can, do anything requiring a modicum of security on the server.
As you cant really encrypt a piece of text you can obfuscate the search and do a check.
<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<!-- some simple styling so the div element does not appear,
you could equally use a hidden form field and not require the styling -->
<style>#h3llo{display:none;}</style>
</head>
<body>
<div>Hello Some simple text
<form action="#" method="post" onSubmit="dosearch();return false;">
<input type="text" id="searchfield" />
<input type="button" name="submit" value="search" onClick="dosearch();return false;" />
</form>
</div>
<div id="h3llo"></div>
<script>
function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}
// converts the input string into hex vals
function Str2Hex(inputvars) {
var tmp = inputvars;
var str = '';
for (var i=0; i<tmp.length; i++) {
c = tmp.charCodeAt(i);
str += '\\x' + d2h(c);
}
return str;
}
// converts the input field h3llo back to a string
function Hex2Str() {
var tmp = document.getElementById('h3llo').innerHTML;
var arr = tmp.split('\x');
var str = '';
for (var i=1; i<arr.length; i++) {
c = String.fromCharCode(h2d(arr[i]));
str += c;
}
return str.trim();
}
// fills the h3llo field with the encoded string
function populate(inputvars){document.getElementById('h3llo').innerHTML = Str2Hex(inputvars);}
// checks that the submitted search string matches the encoded string
function check(inputval){if(Hex2Str().toString() != inputval.toString()){ alert("Warning: '" + Hex2Str().toString() + "' != '" + inputval.toString() + "'");}else{alert("success");}}
// the action that fills the hidden field and checks the encoded value is the same
function dosearch(){var sval = String(document.getElementById('searchfield').value);populate(sval); check(sval);}
</script>
</body>
</html>
If someone viewed the source they wouldn't at first glance be able to see the search string, though as it has mentioned before this would be easy to reverse it would obfuscate from the casual viewer. Also If the encoded data was hidden by css as in this example or a hidden form field it would never appear on the page or source un-encoded.
I am developing a library to simplify my daily tasks, and one of which is encryption.
I am using caesar encryption for element encryptions.
you may download the minified file and include it in your html.
The usage is like:
<!DOCTYPE HTML>
<html>
<head>
<title>
Element Encryption
</title>
<script type="text/javascript" src="https://raw.githubusercontent.com/Amin-Matola/domjs/master/dom-v1.0.0/dom.min.js"></script>
</head>
<body>
<h1>Let's encrypt the element data</h1>
<p>You may encrypt this paragraph data</p>
<p>This is another paragraph you may encrypt too</p>
<footer>
<!--------- You may include your js here ------------->
<script type="text/javascript">
d("p").encrypt(text = "", depth = 10);
</script>
</footer>
</body>
</html>

Categories