How to unescape with javascript and translate with Google? - javascript

i have some code, when i input some test to text box and click Tranlate it will translate to English:
<html>
<head>
<style type="text/css">
input {font-size:12px; width:600px;}
</style>
<title>Translate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="translate"></p>
<div class="translate_control" lang="en">
<input id="text1" class="translate"/>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body>
</html>
http://jsfiddle.net/4CXGf/
Now, i want input some code to text1 as: \u83B7\u53D6\u9875\u9762 and i want when i click Translate it will auto unescape() with javascript "\u83B7\u53D6\u9875\u9762" to 获取页面 and auto translate to English with Google translate and show to text1. How to do it?
Sorry about my English!

There may be a shorter way to do this, but one option is to use the JSON predefined class to handle all the escaping. encodeURI/decodeURI sound like the most obvious approach, but neither of them work in the direction you're trying for, which is to take a string literal that actually says "\u83B7\u53D6\u9875\u9762", including literal backslashes. What you want is to essentially re-evaluate the input string.
I was able to do this like so:
var escapedInput = document.querySelector("#text1").value;
var encodedChars = JSON.parse("\"" + escapedInput + "\"");
Now my encodedChars are 获取页面. Pass that to your translate.

Related

How to stop Hindi language Character or Symbol '।' Converting into HTML Entity Code on blogger

I am using the below script to convert "." into "।" which is the Hindi stop symbol. I am using this code in a blogger post, The script code converts this dot (.) symbol into HTML entity code on blogger post and gives me code like below
।
When I am using pipe | in place of ।, it works perfectly and there is no error. But pipe "|" is not the right symbol for a full stop in Hindi.
Kindly suggest converting "." into "।" that is for a blogger like similar code
Please correct me If I am wrong. I don't have much knowledge of JavaScript and Jquery.
I have used some below code and it works here fine but it did not work on the platform Blogger
Please suggest me the appropriate solution
<!doctype html>
<html dir='ltr' lang='en-GB'>
<head>
<meta charset="UTF-8">
<title>test page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('textarea').on("keyup", function(e) {
var val = $(this).val();
var str = val.replace('.', '।');
$(this).val(str);
});
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>

How to add css styles to document.write in javascript

Hello I'm very new to javascript and doing my first steps I was wondering if I could style the content of a variable in the document.write instruction and I came to this.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.style1{
background-color: chartreuse;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name1;
name1=prompt("Write your name");
document.write('<p class="style1">'+name1+'</p>');
</script>
</body>
</html>
I got that solved by reviewing some posts here the question is how does this actually work?
document.write('<p class="style1">'+name1+'</p>');
I'm not sure I understand why I need to put ' for this instruction could somebody explain that please thank you btw I'm sorry this is a very basic question but I would like to know also if you guys have some more ways to style a document.write it would be nice to know .
I'd suggest taking a slightly different approach. You can add a div to your HTML with an ID of "test" (or whatever you'd like), then edit the innerHTML of that div like so:
document.getElementById("test").innerHTML = name1;
document.write : Write HTML elements with text directly to the HTML document
var name1;
name1=prompt("Write your name");
document.write('<p class="style1">'+name1+'</p>');
Create a variable named name1
Give a value to name1 variable from user input in prompt alert
Write p element with class style1 and its content is value from name1 to HTML document
document.write(); is writing a text in your HTML File.
so if you write like this:
<script>document.write("<p>blah</p>");</script>
then you are writing html Source like <p>blah</p>.

JQuery $("#content").append not working

I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation

How to select specific text between HTML tags with RegExp?

I am building an application which needs to select specific text between html, here is an example:
String:
<p>test1 test2test3</p>
RegExp: (Select text between HTML)(test.)
What I want to select is "test1","test2" and "test3" but not "test0"
Is there any solution??Thanks for any helps
Note: I am using JavaScript for RegExp operation.
You can leverage on the browser's ability to parse HTML for you:
var html = '<p>test1 test2test3</p>',
fragment = document.createDocumentFragment(),
div = fragment.appendChild(document.createElement('div'));
div.innerHTML = html;
console.log(div.textContent || div.innerText || '');
Outputs:
test1 test2test3
I wouldn't use Regexes for this kind of task, if all you need is text of <p> tag, I'd use
jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>test1 test2test3</p>
<script>
$(function(){
text = $('p').text();
alert(text);
});
</script>
</body>
</html>
This returns test1 test2test3
Working example: http://jsbin.com/uhadoz/1/
If you'd like a more generic solution, you still can use jquery, just change the selector:
for example, to get the text of all divs, use $('div').text()
But if you have serious parsing needs, you'd better use an HTML parser, google for
JavaScript HTML parser, for example this one: http://ejohn.org/blog/pure-javascript-html-parser/
Read this SO question about parsing HTML with Regexes: RegEx match open tags except XHTML self-contained tags

Issues with most basic e4x test

When I load a page containing e4x in FF 3.5, I get no inkling that e4x even exists in the browser's JS implementation. Notes below, but here's my HTML :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>e4x test</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js">
</script>
<script type="text/javascript;e4x=1">
function hello() {
var x = new XML();
x = <foo></foo>
dojo.byId("container").innerHTML = "Print me!" + x.toXMLString();
}
</script>
<script type="text/javascript">
dojo.addOnLoad(hello);
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
When I inspect in firebug, it says x doesn't have a toString() method, and my IDE (aptana) thinks that XML is not an object type. Does anyone have any idea what I'm doing wrong?
I'm guessing that it was working all along, but your browser doesn't recognize a "foo" tag and because it does not know how to render it, it ignores it. By putting something inside of your foo tag you would get content out.
BTW: The new XML() statement is entirely unnecessary. You can just do this:
var x = <foo>bar</foo>;
That will create a new XML object for you. Saying new XML() is like saying new String(). You can do it, but it is just a waste of space.
It turns out that I need more in the XML for it to print anything out. bar works, for example. I'm not sure why, but that is what fixed it!

Categories