I have in my database a column that stores html data i.e <p>this is a test</p> and I am loading that data into a javascript form field, however, the html tags are not being parsed properly.
They are being displayed such as;
<p>This is a test</p>
Can someone give me a hint as to what I am doing wrong please.
Parse your text using .html function
var text= $('<textarea />').html("<p>This is a test</p>").text();
alert(text);
DEMO
Looks like the tags are being saved as their HTML entity equivalent. You'll have to convert them to their actual character if that's what you require.
Related
I am displaying the data that is coming from webapi response. Sometimes it's having HTML content. I need to render HTML tags into formatted text.
I am using {ReactHtmlParser(item.value)}. It's not converting the below tags. Please help.
<span style="color:#666666; font-family:arial,sans-serif; font-size:12pt"><strong>Other documents</strong></span>
<p>Discontinued</p>
Thanks
I am trying to make a spreadsheet addon where I have a textarea field where users will be putting the HTML for a table in a field, and I need my script to then take that HTML code, parse it and convert it into an array or object by which I can easily access the table's cells.
The problem I'm facing is that I don't seem to be able to turn the HTML code submitted as text back into a jQuery object I can loop through.
Tl;Dr:
How do I submit a table's HTML code from a form as text and turn it back into an HTML object so I can turn the table into an array/object?
I'm using $("#invoice-info").val() to get its content but using any other methods afterwards gives errors (All of them are either nonspecific or something about "Expected expression but got >", sorry I'm new to JavaScript so I have a hard time debugging it).
Here's the relevant HTML for the form itself:
<form onsubmit="return(false)">
<div class="block col-contain">
<div>
<textarea class="width-100" id="invoice-info" rows="10"></textarea>
<label for="invoice-info">Invoice Table</label>
</div>
</div>
<div class="block" id="button-bar">
<button class="blue" id="make-receipt" onclick='doTest()'>Generate</button>
</div>
</form>
You need to take the result of $("#invoice-info").val() and put it in a domNode. Because it returns a string. var tempDomNode = document.createElement('div'); tempDomNode.innerHTML =$("#invoice-info").val().
So you 'convert' the string into a domNode and then you will be able to use that domNode with or without jQuery to construct your array.
Note : you have to handle the case of a malformed sting (not valid as HTML)
Edit : just found this question on SO : https://stackoverflow.com/a/11047751/1836175 seems to address the same problem.
That title might be a little confusing but I don't know how to put it otherwise. I have some JSON encoded data in a .json-file:
{"foo":"bar", "bar":"foo", "far":"boo"}
and some HTML content in a .html-file:
<h1>I'm a Title</h1>
<p>Lorem Ipsum</p>
<br>
<img src="./media/foo.png">
There is a jQuery script that takes the data from both files ($.getJSON() and $(#div).load()) and creates a page with some predefined head, uses the html as content and the json data to create some buttons (key=destination & value=name) on there.
Because the project has many of these pages I would love to have only one file that holds both my HTML content AND the JSON data so I had all I needed for one page would be a single file access. So the question really is: How can I store both JSON and HTML data in one file so jQuery can access, distinguish and process it?
This is part of an electron application but I'm not sure if that even matters for that question.
The content of the json file assuming it is a json object can be assigned to a javascript variable in the html document in a script tag.
Then to refer to, for example foo, you use theJsonObject.foo;
With the following javascript snipet you can see inthe browser's console the name of each property an the value.
How you mix this in your current code depends on how you are writting it. But make sure the variable is declared before you use it.
for (let prop in theJsonObject) {
console.log( prop + ": " + theJsonObject[prop] );
};
<html>
<head>
....
<script>
var theJsonObject = {"foo":"bar", "bar":"foo", "far":"boo"};
</script>
</head>
<body>
....
</body>
</html>
Im sure this is probably a stupid question...
Im using chance.js because I want the main <h1> on my site to display something different each time you reload the page.
So if i put the following into my functions.js file:
$(window).load(function() {
document.write(chance.pick(['hello', 'GDay']));
});
how to I get the word to appear inside my <h1> </h1> tags in my html file ?
The document.write method will output that text where it is called. If you call it between the tags, it will output that text between the tags.
Give the <h1> tags an ID, like this:
<h1 id="title">text here</h1>
Then, instead of document.write, do something like this:
$("#title").html(chance.pick(['hello', 'GDay']));
I have variable "htmlElement" which has the format like <p class="Day">Test Message</p>
What I am going to do is to output the content of htmlElement as a string to the div which has a class panel-body.
What I did is $(".panel-body").append(htmlElement);
But in the div.panel-body, user can only see Test Message, the other part has been treated as html tag.
The question is , how could I let the div.panel-body show "<p class=Day>Test Message</p>"
Thanks.
How about
$(".panel-body").append(document.createTextNode(htmlElement));
http://jsfiddle.net/9z3zE/
Well, I don't know what you have stored in variables already, but if you have <p class=Day>Test Message</p> stored in a string variable, you can do this:
$(".panel-body").text(variable);
(As Musa said, this replaces the content.)
To add, do:
$(".panel-body").append("<p class=Day>Test Message</p>");
or
$(".panel-body").prepend("<p class=Day>Test Message</p>");