How to correct / parse xHTML errors [duplicate] - javascript

I need to add a closing image tag. Current html:
<img class="logoEmail" src="/images/logoPDF.png">
What I want:
<img class="logoEmail" src="/images/logoPDF.png"/>
How can I do that?

myInput ='<img class="example1" src="/images/example1.png">';
myInput += '<img class="example2" src="/images/example2.png"/>';
result = myInput.replace(/(<img("[^"]*"|[^\/">])*)>/gi, "$1/>");
Explanation of the regex:
<img The start
"[^"]*" A string inside the tag. May contain the / character.
[^\/">] Anything else (not a string, not a / and not the end of the tag)
> The end of an IMG tag
This will only match unfinished tags, and will replace it by the whole thing, plus a />
As I said before this is NOT bulletproof, probably there is no regex that would work 100%.

You could try this regex also,
result = myInput.replace(/^([^\.]*\.[^>]*)(.*)$/g, "$1/$2");
DEMO
It captures all the characters upto a literal dot and stored it into a group. Then it again captures characters upto > and stored into another group. Add a / in between the captured groups in the replacement part will give you the desired output.

It can be as easy as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Replace IMG tags w/ regex</title>
<script type="text/javascript">
window.onload = function() {
document.body.innerHTML = document.body.innerHTML.replace(/(<img[^>]+)/g, "$1 /");
}
</script>
</head>
<body>
<p>Some text.</p>
<img src="images/logoPhone.jpg">
<br>
<img src="images/logoMail.png">
<p>Some more text.</p>
</body>
</html>
.
Explanation:
<img: match must start with this.
[^>]: after the starting match, the next character may be anything but >.
+: one or more occurances.
g: apply globally, do not return on the first match.
$1: as in the first capture group (= stuff between first set of parentheses).
.
Be aware that Firebug never shows closing slashes, regardless of doctype. But you can see the regex script in action here: http://regex101.com/r/zS2zO1.

Related

inserting mathjax equation into innerHTML from javascript

I need to put a MathJax equation into the innerHTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tools for Operation Research</title>
<script type="text/javascript" src="D:/_Installers/MathJax-2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<section id="main_content">
Put text here:
</section>
<script>
document.getElementById("main_content").innerHTML = "The expresion is: <br> $$\displaystyle Q^*=\sqrt{\left( \frac{2DA}{h}\right)\left(\frac{1}{1-\frac{D}{\psi}}\right)\left(\frac{h+\pi}{\pi}\right)}$$";
</script>
</body>
The result is this:
$$displaystyle Q^*=sqrt{left( rac{2DA}{h} ight)left(rac{1}{1-rac{D}{psi}} ight)left(rac{h+pi}{pi} ight)}$$
not the equation.
Shoulb be something like this:
Correct equation
JavaScript Compiler unescapes backslash escaping
Because JavaScript uses backslash escaping, all the '\' characters before unrecognized letters in the equation are being removed by the JavaScript compiler, and '\r' is turned into an ASCII carriage return character which HTML then displays as whitespace.
The solution is to backslash escape the backslashes in the equation:
<script>
document.getElementById("main_content").innerHTML = "The expresion is: <br> $$\\displaystyle Q^*=\\sqrt{\\left( \\frac{2DA}{h}\\right)\\left(\\frac{1}{1-\\frac{D}{\\psi}}\\right)\\left(\frac{h+\pi}{\\pi}\\right)}$$";
</script>
Note I was able to verify the equation was displayed as symbols using a downloaded copy of MathJax from a CDN, but did not attempt a local installation.

jQuery does not find IMG component by its ID

I have a webpage which contains such code:
<img class="img-qrcode" id="img_123.000.00.01"
src="http://localhost:7777/data/code_img\123.000.00.01.png"
alt="./data/code_img\123.000.00.01.png" style="display:none">
I want to locate it with jQuery. For some reason jQuery does not find it by ID, with the code:
$("#img_123.000.00.01")
The added screenshot shows that it returns an empty array.
Why does it not find the element with ID ?
Using an attribute selector for id, you don't have to worry about escaping the class selector (.)
let img = $("img[id='img_123.000.00.01']");
console.log(img.attr('src'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="img-qrcode" id="img_123.000.00.01"
src="http://localhost:7777/data/code_img\123.000.00.01.png"
alt="./data/code_img\123.000.00.01.png" style="display:none">
The a . character has special meaning in a selector (it starts a class selector) so you need to escape it. (Remember to escape the slash character in a string literal).
Generally it is easier to just avoid using . chapters in an id.
Find with ^
let img = $("img[id^='img_123']");
console.log(img.attr('src'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="img-qrcode" id="img_123"
src="http://localhost:7777/data/code_img\123.000.00.01.png"
alt="./data/code_img\123.000.00.01.png" style="display:none">
When some special symbols are in the jquery selector, you need to add 『\\』
console.log($("#img_123\\.000\\.00\\.01"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img class="img-qrcode" id="img_123.000.00.01" src="http://localhost:7777/data/code_img\123.000.00.01.png" alt="./data/code_img\123.000.00.01.png" style="display:none">
</body>
</html>
Since #id.className is a valid selector jQuery assumes it so and tries to find such element. In your case you will have to escape the dot.
Change $("#img_123.000.00.01") to $("#img_123\\.000\\.00\\.01") and it will work.
Official jQuery documentation(https://api.jquery.com/category/selectors/) states it clearly.
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[\]^{|}~` ) as a literal part of a name, it
must be escaped with with two backslashes

Letter replacement

I want to make letters like 'å ä ö' visible. I need to replace these letters with ascii code, I guess.
I have tried jquery and javascript, but it did not work. Look at the following code please:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery("#body").html(
jQuery("#body").html().replace('ä', 'å')
);
document.body.innerHTML = document.body.innerHTML.replace(/ä/g, 'å');
</script>
</head>
<body id="body">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.php">Inlägg</a>
</nav>
</div>
</div>
You can achieve what you want using one of the three methods below.
codepen
JQuery
// using a regex on the first parameter of replace,
// picks all the 'ä' instead of the first one
var replaced = $("body").html().replace(/ä/g,'å');
$("body").html(replaced);
JavaScript
// using a regex on the first parameter of replace,
// picks all the 'ä' instead of the first one
document.body.innerHTML = document.body.innerHTML.replace(/ä/g, 'å');
Better Solution
A better alternative to the two previous code sample is to convert your file to the right encoding. In order to do that, make sure you this snippet in the head of you HTML document.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
If that's not working, you also have to make sure the file is saved with encoding UTF-8. If you're using Notepad++, this is done via Encoding > Encode in UTF-8.

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

How to create a new web character symbol recognizable by html/javascript?

I have checked many questions here but none has my answer. I appreciate if you direct me to the right path.
I like to make a new symbol (not a font or related to any alphabet) like creating a new language alphabets that could be recognized or translated in a browser in form of html or javascript code.
In other words, assigning single custom character for multiple characters.(e.x 1 ch translates into 5 ch)
I assume I need to make the font first and then assign that character. What programs do you suggest or what is the best approach?
Edit:
A better example:
Make a new character like ¢ (cent) that has entity name --> & c e n t; and entity number --> & # 1 6 2;
Edit 2: Thank you all for your replies. I'm trying to check your links and suggestions.As I understand, there might be an issue of browser compatibility. So how about make new symbols in a text file saved on server and when the user views the file, javascript converts those symbols into a word or other standard characters?
Edit3: Sorry for any confusion guys, you are all awesome. This example might clear things.
make a new symbol that assigns to "AB". So one character that translates into two characters?
Edit4:
This is based on Jared answer. This does work for Z and P. Now how should I add my custom font to this file (replace Z and P with my own)?
Assuming Z and P are my custom made symbols
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY Z "AB">
<!ENTITY P "DE">
...
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Extending XHTML - Example 1</title>
</head>
<body>
<p>My symbols are &Z; and &P;</p>
</body>
</html>
This may be an option for you, I'm not quite sure. Pretty much, if you use XHTML and/or XLST, you could possibly achieve what you're looking for in custom-defined characters. For example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ENTITY mailto "mailto:">
<!ENTITY username "gabriel">
<!ENTITY arobase "#">
<!ENTITY hostname "gabsoftware">
<!ENTITY tld ".com">
<!ENTITY email "&username;&arobase;&hostname;&tld;">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Extending XHTML - Example 1</title>
</head>
<body>
<p>My email is &email;</p>
</body>
</html>
http://jfcoder.com/test/entities.xhtml
You'll see the SGML ENTITY element, which by the way I believe HTML5 is no longer going to belong to anymore. Whether or not you can embed an image in those entities or through an XLST transformation to achieve your goal I haven't figured out yet.
For many more examples and options, see this page:
Extending XHTML with XML, XSLT, entities, CDATA sections and JavaScript
You have to use the SGML Entity declaration to create a new character entity. This should work in all languages that inherit from SGML including HTML and XML, but I would be sure to test this in all supported user agents just to be sure.
http://en.wikipedia.org/wiki/XML_entity
If you're using standard characters (a-Z, A-Z, 0-9, !, #, #, $, etc), ,you could make a PHP variable that has the translation as the page is being rendered (JavaScript is after the page is rendered/downloaded).
<?php
$from = "A";
$into = "ABCD";
$content = "This is A whole lot of page content";
echo preg_replace("$from, $into, $content);
// will output "This is ABCD whole lot of page content"
?>
Could work with special fonts too, i'd imagine, or even swapping $from into <img src=pic/of/chars.png" />.

Categories