Why Javascript innerHTML add quote automatically to my string? - javascript

I am trying to add some HTML code and text in a div. If I add just a text there isn't any problem. But if I add some text with HTML code, it automatically adds quotes to my text.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function test() {
document.getElementById("viewer1").innerHTML = "text";// this is not add any quote to text
document.getElementById("viewer2").innerHTML = "text <b>Bold Text</b>"; //this is add quote to text but not add quote to <b>Bold Text</b>
}
</script>
</head>
<body>
<div id="viewer1"></div>
<div id="viewer2"></div>
<button onclick="test()">Test it</button>
</body>
</html>
It looks like this
viewer1 content = text
viever2 content ="text" <b>Bold Text</b>
I don't want the quotes. How can it be removed?
Take a look at the screenshot below:

The quotes will not shown in web page. it's just for chrome console node.

Related

Javascript Regex to remove just the <html> tag

I have a very long string that is made by few HTML documents jammed together like this:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
some head info
</head>
<body>
<div > some content with other HTML tags that I want to preserve </div>
<body>
</html>
<html>
<div> another content with other HTML tags that I want to preserve </div>
</html>
<html xmlns="http://www.w3.org/TR/REC-html40">
<head>
some head info
</head>
<body>
<div> some other content with other HTML tags that I want to preserve </div>
<body>
</html>
and I would like to turn them into something like this:
<div > some content with other HTML tags that I want to preserve </div>
<div> another content with other HTML tags that I want to preserve </div>
<div> some other content with other HTML tags that I want to preserve </div>
Basically Im looking for a Regex to remove just the <html> </html> tags (not the other/inner html elements) from a huge html string. Please note that I should preserve the html content and just get rid of the parent tags.
Thanks in advance
(Please note that I have done an extensive search to make sure this is not a duplicate question)
As an important note: https://stackoverflow.com/a/1732454/3498950
But if you must, I might use something like /<\/?html.*?>/g
const html = `<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>head info</head>
<div>other content</div>
</html>`;
console.log(html.replace(/<\/?html.*?>/g, '').trim());
And for tweaking the regex: https://regex101.com/r/EeTv68/1

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>

javascript click a button and create an image in a div

I've searched this problem of mine and found some solutions but there is something wrong I must be doing because it doesn't work.
I would like to, simply, just press a button and make an image appear in a certain div. Later, I'd like to add more buttons and each button will correspond to an image changing this image in the same div.
My code is this:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<button id="button1">Button 1</button><button id="button2">Button 2</button></br>
<button id="button3">Button 3</button><button id="button4">Button 2</button></br>
<p> </p>
<div id="1"></div>
<div id="2"></div>
<script type="text/javascript">
document.getElementById("button1").onclick=function() {
document.getElementById("1").appendChild="<img id="image1" src="img/image1.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("1").appendChild="<img id="image2" src="img/image2.png" />;
}
document.getElementById("button3").onclick=function() {
document.getElementById("2").appendChild="<img id="image3" src="img/image3.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("2").appendChild="<img id="image4" src="img/image4.png" />;
}
</script>
</body>
</html>
but somehow I cannot make this work.
You're using double quotes inside a string encapsulated by double quotes:
"<img id="image1" src="img/image1.png" />;
This needs to be
"<img id=\"image1\" src=\"img/image1.png\" />";
Since JavaScript uses quotes (single or double) to set strings you need to escape quotes inside a string with \ to avoid breaking the string. In your original code JavaScript is parsing the string, finds the end of the string at id= and breaks because it expects a line terminator ; or a +.
Look at the highlighting in the first and second code block. It's all red in the second indicating a correct escaped string.
ALSO
appendChild only works with nodes/elements and not with strings. You need innerHTML, however that will overwrite the content of your div every time. If you don't want that you could use: insertAdjacentHTML()
Example:
document.getElementById("1").insertAdjacentHTML("beforeend", "<img id=\"image1\" src=\"img/image1.png\" />");
Try this:
Javascript:
document.getElementById(<img id>).src = "<link to img>";
HTML:
<img id='<img id>' src='<link to img>'>

My iframe keeps displaying code injected as a string of text, not rendering

For certain reasons, I have it so a div will contain code that I want an iframe to load:
<div id="MyDiv">
<html>
<head>
</head>
<body>
<h1>Hi</h1>
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
My Javascript to get the text (the code) within the div above:
var DCode = document.getElementById("MyDiv").innerHTML;
My Jquery to add the code to my iframe:
$('#MyFrame').contents().find('html').append(DCode);
When I view the document in my iframe, I see the html from the div inside but wrapped with double quotes and in the body. How can I get it to display as a page?
One thing I realized when using an alert box to display the code, the "<" are shown as the escape characters: & l t ;
Few things to consider -
1) Contents in MyDiv - <head> and <body> tags starts but do not end.
2) var "DCode" holds innerHTML but jquery appends "DString".. Variables are different.
Is it a typo in asking the question?
I could not reproduce your issue. Following code works fine for me -
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function copy()
{
var DCode = document.getElementById("MyDiv").innerHTML;
$('#MyFrame').contents().find('html').append(DCode);
}
</script>
</head>
<body onload="copy();">
<div id="MyDiv">
<html>
<head></head>
<body>
<h1>Hi</h1>
Div body
</body>
</html>
</div>
<iframe id="MyFrame"></iframe>
</body>
</html>

Get rid or hide html tags from textarea in Javascript

I retrieved a body of a textarea using json but the text appears to come with html tags due to some styles have been previously set.
How would I be able to display these lines of text on a new textarea without these html tags being visible? I don't want to get rid of them completely because I still want to keep the styles for the future use.
You need to escape html tags from your incoming string from textarea. By a regular expression like /<(.|\n)*?>/ you can find opening html tags and with /<(\/.|\n)*?>/ you can find closing tags.
Here is my example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<textarea id="input">
<p>This is html</p>
</textarea>
<textarea id="output">
</textarea>
JavaScript
var input = document.getElementById('input'),
output = document.getElementById('output');
output.value = input.value.replace(/<(.|\n)*?>/, '').replace(/<\/(.|\n)*?>/, '');
Live in: JSBin
You may want to detect closing tags like /> with this regular expression: /\/(.|\n)*?>/
textarea{width:100%;min-height:75px}
<textarea id="input">
<p>This is html</p>
<p>This is html</p>
<p>This is html</p>
</textarea>
<button onClick="removeTags()">Remove</button>
<textarea id="output"></textarea>
<script>
function removeTags(){
var input = document.getElementById('input');
var output = document.getElementById('output');
output.value = input.value.replace(/(<([^>]+)>)/ig,"");
}
removeTags();
</script>

Categories