Letter replacement - javascript

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.

Related

Create HTML doc like Bootstrap with Prism

I am facing a problem about how to create HTML code examples with Prism, either with pure JS or VueJS.
I need to get something like Bootstrap documentation, with several lines of HTML code displayed, indented, and highlighted.
It works when I put the HTML code directly between the pre/code tags, replacing the < with <.
But I want something more automatic, in which you write a line of code, for example to create a button, and under it, you have the code displayed.
So I am looking for a way to copy this line of code between the pre/code tags.
The problem is that either through the data objects of Vuejs (putting it as a string), or with the appendChild or innerHTML DOM methods, it doesn't works.
With VueJS I get a highlighted line of code but I can't have a multi-line example.
With appendChild and innerHTML, is displayed only the content of the element, for example the text between the button or div tags.
What I need is a way to display all the code, from < of the first tag to > of the last one.
How can I achieve this? Is it possible or is HTML impossible to easily display in the browser?
Here is the easy JS example I am working on.
If you uncomment the line between code tags, you will have the working example, the result I want to get from a more automatic way, just writing once the line of code, and then copying it.
Thanks
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>About</div>
<pre>
<code id="hh">
<!-- <div class="div" data-modifiers='["div--small", "div--big"]'>About</div>-->
</code>
</pre>
<script>
const example = document.getElementById('gg');
const toDisplay = document.getElementById('hh');
// toDisplay.appendChild(example);
hh.innerHTML = gg.innerHTML;
</script>
</body>
</html>
I finally found the solution using only pure JS (no framework).
I share the solution if one day someone needs it.
You can add Prism to get a highlighted displayed code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>
<p>fff</p>
About
</div>
<pre>
<code id="hh" class="language-html">
</code>
</pre>
<script>
const example = document.getElementById('gg').outerHTML;
const toDisplay = document.getElementById('hh');
const regex = /</gi;
renamed = example.replace(regex , '<');
hh.innerHTML = renamed;
</script>
</body>
</html>

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

Javascript Return HTML and css content as a string but not the javascript

is there a way of getting all the content of the page HTML , CSS , but exclude all the java script functions and script src?
var htmlPage = $("html").html();
console.log(htmlPage);
I know that will give me all of it. but I need to exclude the JS from the results
EDIT: fixed the regex (non-greedy version)
You can try this:
var htmlPage = $("html").html().replace(/<script[\s\S]*?<\/script>/mig, "");
The regular expression should match all <script> ... </script> tags and replace them with nothing.
BTW this is kind of a lucky shot because the regex itself requires the ending </script> to be escaped with a \ backslash like this: <\/script>.
This escape character is why the regex doesn't match itself, which would cause it to fail. So, it works because by escaping it correctly it isn't self-similar anymore.
Another option is to use Element.innerHTML and include the content that you want to get. For example:
<!doctype html>
<html>
<head>
<!--Css links goes here-->
</head>
<body>
<!--Your content-->
<p>Hello World</p>
</body>
<script>
//Js
</script>
<html>
var body = document.body.innerHTML;
var head = document.head.innerHTML;
Then you can concadenate or whatever you want.

How to print special characters with jquery?

I am designing web page in slovak language. To be able to use meantioned language special characters such as á or ž, I am using this html code:
<html lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
Now it works as expected but only when I hard code that kind of text into html file.
As soon as I use jquery to print them it breaks down and those characters are not correctly shown.
$("#myDiv").html("áž");
Am I supposed to specify something in jquery or is there another way to overcome this problem?
You can pass the numeric entity for that character into the html() function to achieve that,
Try a sample,
$('body').html('Ξ');
DEMO
I think you may be use some tricks here
Try this
$("#myDiv").html($("<div>").html("áž").text());
Or simply try this
$("#myDiv").text("áž");
It is quite Easy you can do the following
Use any special Character u want
$("#mydiv").text("*&^&*^*&^*");
Here is the Demo

Jscript not printing to element

I have no idea why this isn't working. I mean as far as I know It should print my array in alphabetical order to the div "output"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Lexicographic ordering </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var words = [];
var input = prompt("Please enter a word or type end to stop prompts");
while (input != 'end') {
words.push(input);
input = prompt("Please enter a word or type end to stop prompts");
}
words.sort();
getElementById('#output').innerHTML= words.join();
</script>
</head>
<body>
<header>Lexicographic Ordering </header>
<hr>
<div class ="page-wrapper">
h1> Lexicographic Ordering </h1>
<div id="output"></div>
</div>
</body>
</html>
There are two small bugs in your code, and they're both in this line:
getElementById('#output').innerHTML= words.join();
getElementById is not a part of the window, it's a part of the document object, so you must reference it properly. Also, that method takes an ID, not a selector, so you don't need the # in front of it.
document.getElementById('output').innerHTML= words.join();
That should do what you want! Alternatively, since I notice you have jQuery included, you could do $('#output').innerHTML = ... to achieve the same effects.
You may also try to move the <script> block at the end, just before closing of the </body>. Anywhere after the <div id="output"></div>.
JavaScript on some browsers fails when they have to reference some elements which has not been parsed by their HTML parser when the script is executing or trying to reference them.
Also, you don't use # with getElementById(...);. # is used with Jquery. This is pure JavaScript. Make it getElementById('output').whatever...;
Edit:
Another option suggested by Patrick Evans is to move the JavaScript Code in an onload() event handler method to execute the code. This ensures that the HTML is fully loaded in the DOM before we try to manipulate it.

Categories