My input with data
const data = `#test : [separator]#`
target output
<div> <div>test : </div> <div>[separator]</div> </div>
How to make it with markdown-it library javascript??
According to their docs, you need to pass it into their render function. That will then give you the HTML.
If you want your #test : [separator]# to look exactly like your example HTML output, you need to fix your string so the markdown will actually translate to that. Markdown has no concept of what a div is.
const data = `test : [separator]`;
const element = document.getElementById('test');
const md = window.markdownit();
const result = md.render(data);
console.log('MD Result', result);
document.getElementById('test').innerHTML = result;
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.min.js"></script>
<div id="test"></div>
Related
I have a radar_box div which is color #7eb6ff, i want to change the color to red if the jsonstr value in external javascript file is above 100. my code is so far doing nothing:
html:
<script type="text/javascript" src="../declare.js"></script>
<section id="alert">
<h1>alert</h1><br><br>
<div class="radar_box_area">
<div class="radar_box" id="radar_box">
<div class="radar"></div>
</div>
</div>
<script>
var mmm=document.getElementById("radar_box");
function cond(){
if(jsonstr > 100){
mmm.style.backgroundColor("red");
}}
</script>
</section>
my declare.js file:
var jsonstr = ["131.05\r\n"]
if the solution is to write my condition in js file, i can't do it because declare.js is created when i run python code. so the whole file is rewritten.
in cond function use this snippet.
what we done here is just replace any spaces, convert return str to number by using + sign and then compare with value.
var jsonstr = ["131.05\r\n"];
const check = +jsonstr[0].replace(/(\r\n|\n|\r)/gm, '')
if (check > 100) {
console.log('in', check)
}
I use ajax get a json like this:
{"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"}
How to append "delete_flag" , "id" , "icon_img" to 3 different places on html ?
You can use this pure javascript method like below.
The code basically uses document.getElementById() to get the element, and .innerHTML to set the inside of the element to the value of the object.
This code (and the code using jQuery) both use JSON.parse() to parse the data into the correct object that our code can read. The [0] at the end is to select the object we wanted since it would give us an array (and we want an object).
const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];
document.getElementById("delete_flag").innerHTML = parsedData.delete_flag;
document.getElementById("id").innerHTML = parsedData.id;
document.getElementById("icon_img").src = parsedData.icon_img;
<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">
Or you can use jQuery (which in my opinion, is much simpler). The code below uses .html() to change the inside of the divs to the item from the object, and .attr() to set the attribute src to the image source you wanted.
const result = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(result.dataStore)[0];
$("#delete_flag").html(parsedData.delete_flag);
$("#id").html(parsedData.id);
$("#icon_img").attr("src", parsedData.icon_img);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="delete_flag"></div>
<div id="id"></div>
<img id="icon_img">
you can use jQuery .html() or .text()
For example:
var json = {"id" : "74"};
$( "#content" )
.html( "<span>This is the ID: " + json.id + "</span>" );
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Just use some simple JavaScript parsing:
const jsonData = {"dataStore":"[{\"delete_flag\":\"false\",\"id\":\"74\",\"icon_img\":\"img/a5.jpeg\"}]"};
const parsedData = JSON.parse(jsonData.dataStore)[0];
document.getElementById("delFlag").textContent = "Delete Flag: " + parsedData["delete_flag"];
document.getElementById("id").textContent = "ID: " + parsedData["id"];
document.getElementById("img").textContent = "Image: " + parsedData["icon_img"];
<p id="delFlag"></p>
<p id="id"></p>
<p id="img"></p>
Note that you can't parse the full object jsonData because it's not JSON - only the data inside it is JSON.
I've upvoted the other answers, but maybe this will help someone else. On your ajax success function, do something like this:
success: function(data){
// console.log('succes: '+data);
var delete_flag = data['delete_flag'];
$('#results').html(delete_flag); // update the DIV or whatever element
}
if you got real fancy, you could create a for loop and put all the json variable you need into an array and create a function to parse them all into their proper elements; you could learn this on your own fairly easily.
var data = {
"dataStore": {
"delete_flag": "false",
id: "74"
}
}
$('.flag').html(data.dataStore.delete_flag);
$('.id').html(data.dataStore.id);
span {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Flag: <span class="flag"></span>
<hr />
ID: <span class="id"></span>
I want to convert the following string to HTML tags and place it inside my div.
<strong>asdfadfsafsd</strong>
I am using the following code to place it inside my div:
var message = "<strong>testmessage</strong>";
document.getElementById('message').innerHTML = bericht;
The problem is that I see the following in my div now:
<strong>testmessage</strong>
But I want to see:
testmessage
What is the problem?
var string = "<strong>asdfadfsafsd</strong>",
results = document.getElementById("results")
results.innerHTML = string;
results.innerHTML = results.textContent;
<div id="results"></div>
At first load the it as html. Then fetch it as text and then again load it as HTML :)
Refer HTML Entities
Try createElement
var tag = document.createElement("strong");
var t = document.createTextNode("testmessage");
tag.appendChild(t);
document.body.appendChild(tag);
I have a string of HTML like this
var html = "<html><head></head><body class='getMe'></body></html>";
I want to get the body tags class and I tried doing that like this.
$(html).filter("body").attr("class")
$(html).find("body").attr("class");
But both methods return undefined. Any help?
You do not need to parse into html, rather try RegExp:
var html = "<html><head></head><body class='getMe'></body></html>";
var clazz = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1]; //getMe
Here, String.match() gives array of string for given pattern.
body\sclass=['|"]([^'|"]*)['|"] gives ["body class='getMe'", "getMe"]. Using (), you can grab a particular group.
Also works with multiple classes and other attributes:
var html = "<html><head></head><body class='getMe hey there' id='xyz' bgcolor='red'></body></html>";
var clazz = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1]; //getMe hey there
Edited
In order to get classes belonging to body tag starting with header-:
var html = "<html><head></head><body class='getMe header header-1 header-two test'></body></html>";
var headers = html.match(/body\sclass=['|"]([^'|"]*)['|"]/)[1].match(/(header\-\w+)/g);
//["header-1", "header-two"]
Try
var html = "<html><head></head><body class='getMe'></body></html>";
var className = $("<html />", {"html":html}).find("body")[0].className;
console.log(className);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
Did you try to put it in a Variable? find the tag without ""
var MyClass = $(body).attr("class");
// or $(html).find(body).attr("class");
for(i=0;i<headingsallowed.length;i++){
var x=allhtml.getElementsByTagName(headingsallowed[i]);
}
I have this code which gets all the headings in my scripts, I want to process them one by one and output the title that is in each of the headings. headingsallowed is the array with the headings in so just ['h1,'h2','h3']. allhtml is just var allhtml = document.getElementById('content');
SO
<h1>hi</h1>
<h1>he</h1>
<h1>yes</h1>
<h1>no</h1>
would output hi,he,yes,no
I tried x.innerHTML and x.text but they did not work
For the given html, the following will print the content inside each heading.
var headings = document.getElementsByTagName('h1');
for(i=0;i<headings.length;i++){
console.log(headings[i].innerHTML);
}
If I understood your problem properly. I got this working.
HTML
<h1>hi</h1>
<h1>he</h1>
<h1>yes</h1>
<h1>no</h1>
Javascript
var allHeadings=document.getElementsByTagName('h1');
for(i=0;i<allHeadings.length;i++){console.log(allHeadings[i].innerHTML)}