While developing chrome extension for detecting the mobile numbers, I have used javascript included in to the content script. For implementation I used this link for detection but using this javascript are also detecting from html attributes like
file 1
Since, 1234566780 is not a mobile numbers it get detected as a number. How can these html tags can be ignored while performing this replacing task. Is there any javascript function to ignore the HTML tags ?
I think this can be done by implementing the regex of
1. ignoring the characters start with "<" and end with ">"
here is html file,
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script>
$(document).ready(function () {
$('body').each(function () {
$(this).html($(this).html().replace(/(\d\d\d\d\d\d\d\d\d\d)/g, '$1'));
});
});
</script>
</head>
<body>Vignesh - 9427415949 file 1
</body>
</html>
Related
I just tried this code on my browser (Chrome 39, Windows 8) :-
<html>
<body>
<script>
<!--
document.write("<h1>Hello</h1>");
-->
</script>
</body>
</html>
This produces the Header text on the browser. But when I make a slight change- put the HTML comment stuff on a single line,
<html>
<body>
<script>
<!-- document.write("<h1>Hello</h1>"); -->
</script>
</body>
</html>
This doesn't display anything.
Why is it so? I don't think HTML comments are in the Javascript standards.
p.s. I know how to put javascript comments. I'm only wondering about this erratic behavior.
That's the way to hide javascript to browsers that don't recognize the script element. The first line is allways ignored: Hiding script data from user agents
Commenting scripts in JavaScript
The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and
ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the
current line. This is needed to hide the string "-->" from the
JavaScript parser.
<SCRIPT type="text/javascript">
<!-- to hide script contents from old browsers
function square(i) {
document.write("The call passed ", i ," to the function.","<BR>")
return i * i
}
document.write("The function returned ",square(5),".")
// end hiding contents from old browsers -->
</SCRIPT>
I'm using Prettify.JS to display some code on a Web site I'm developing. I seem to be having some problems with script tags, especially 'non-linking' ones:
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
This code displays the following (notice the entire script tag is red):
However, when I do this little hack below (adding some invisible html before closing the opening script tag):
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
It seems to display Ok:
The problem is when I add multiple non-linked script tag blocks, The problem comes up again. So the following code:
<pre>
// Link CSS
<link rel="stylesheet" href="device.css" />
// Link JQuery
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
// Link DeviceJS
<script type="text/javascript" src="device.min.js"></script>
// Initialize DeviceJS
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
<script<span style="display:none;"> t</span>>
$(document).ready(function () {
$('selector').devicejs(options);
});
</script>
</pre>
Shows as:
I looked through the Prettify.JS Source Code and on line 1211 I see the following:
['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
which I believe is part of the lexer.
I'm not a Regex Ninja so I would appreciate any assistance on how I could tweak this so that Prettify.JS can accommodate non-linking script tags with no attributes.
Thanks in advance.
An HTML example shows this working fine, so I suspect your problem relates to prettify not recognizing the content as HTML and so using the wrong language handler. Without seeing how you're invoking prettify, it's hard to say.
I looked through the Prettify.JS Source Code and on line 1211 I see the following:
['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
which I believe is part of the lexer.
You are correct. This is saying that a script elements starts with
<script\b[^>]*>
or the text <script (case-insensitively due to /i at the end) followed by a word break and any number of non > characters followed by a >
Then
([\s\S]*?)
non-greedily matches the minimal number of characters necessary before the close tag. This is in capturing group 1 so this content will be recursively prettified using the type hint lang-js.
Finally
(<\/script\b[^>]*>)
works similarly to the open tag, but is a close tag. It should probably not be in a capturing group, but that shouldn't affect correctness.
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.
Is there any way to fix the error that a JavaScript & causes in w3 validation? The problem is that i have to use && in a if statement and these two &&'s causes errors in w3 validation.
EDIT:
Same problem with "<" and ">".
There are a few things you can do.
You can enclose it within HTML comments:
<script type="text/javascript">
<!--
if (foo && bar) ...
//-->
</script>
You can enclose it in a CDATA section:
<script type="text/javascript">
// <![CDATA[
if (foo && bar) ...
// ]]>
</script>
You can include in in a file instead:
<script src="foobar.js" type="text/javascript"></script>
The primary answer is: Use JavaScript files for JavaScript, not HTML files, and use the src attribute of script tags. (Combine all your JS into one file, minimize, gzip, etc. for performance.)
But, you can embed JavaScript in HTML if absolutely necessary. Use a valid, modern DOCTYPE and you don't have to resort to comment tags and CDATA sections.
Valid HTML5 example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Example</title>
<script type='text/javascript'>
function foo() {
var a = 1, b = 2;
if (a && b) {
alert("Both");
}
if (a < b) {
alert("a < b");
}
if (a > b) {
alert("a > b");
}
}
</script>
</head>
<body>
<p>Hi there</p>
</body>
</html>
That will also validate as HTML4 strict if you change the doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Note that in both cases, you need to be careful about end tags in your script --
This causes the problem:
<script type='text/javascript'>
alert("</td>");
</script>
This solves the problem by prefacing the slash with a backslash (or you can break the end tag up into separate string literals):
<script type='text/javascript'>
alert("<\/td>");
// -or-
alert("<" + "/td>");
</script>
But again, the basic answer is: Don't embed JavaScript within HTML files when you can avoid it, use JavaScript files for that.
Based on your description, I suspect that you're talking about script that's inside an event property in an HTML tag (such as onclick). In that event, the script code needs to be HTML encoded. Elijah hit the nail on the head there.
For example:
<input type="submit" onclick="if(somevar && othervar) callFunc("clicked");">
You do not need to do that inside a <script></script> block.
Escape & with &, < with <, and > with >.
I have an HTML page with a typical structure:
<html>
<head>
<script src="..." ></script>
<style>...</style>
</head>
<body>
content
</body>
<script>
var success_callback = function(data) {
// REPLACE PAGE CONTENT & STRUCTURE WITH "data"
}
ajax(url, params, success_callback);
</script>
</html>
Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.
Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).
EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using <script src="...">.
The simplest way is to set the new HTML content using:
document.open();
document.write(newContent);
document.close();
try this with jQuery:
$('body').load( url,[data],[callback] );
Read more at docs.jquery.com / Ajax / load
Here's how to do it in Prototype: $(id).update(data)
And jQuery: $('#id').replaceWith(data)
But document.getElementById(id).innerHTML=data should work too.
EDIT: Prototype and jQuery automatically evaluate scripts for you.
You could try doing
document.getElementById(id).innerHTML = ajax_response
the simplest way is
$("body").html(data);
Can't you just try to replace the body content with the document.body handler?
if your page is this:
<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>
Just use the document.body to replace the body.
This works for me. All the content of the BODY tag is replaced by the innerHTML you specify.
If you need to even change the html tag and all childs you should check out which tags of the 'document.' are capable of doing so.
An example with javascript scripting inside it:
<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>
This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.
Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.
I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
content
</body>
<script type="text/javascript">
$("body").load(url);
</script>
</html>