Develop Reference

change radar color on condition using existing js file variable

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)
}

replace with some other text

I'm stuck in a thing where I need to replace with some other text.
I have tried the following code.
var text = $("#nbspData").text().replace(' ','a');
$("#removedData").html(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="nbspData">this is me.</p>
<p id="removedData"></p>
But when I inspect the code the is not removed.

That happens because text() doesn't returns those encoded chars, it just returns the text you're seeing, e.g.: "this is me". So there is nothing to replace. Change text() to html():
var text = $("#nbspData").html().replace(' ','a');
var text = $("#nbspData").html().replace(' ','a');
$("#removedData").html(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="nbspData">this is me.</p>
<p id="removedData"></p>
Additional info: Use a regex replace if you want to replace all occurences of :
var text = $("#nbspData").html().replace(/\ /g,'a');
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="nbspData">this is me.</p>

This is a solution for HTML tag and &nbsp etc and you can remove and add conditions
based on your reuirement
convertHtmlToText(passHtmlBlock)
{
str = str.toString();
return str.replace(/<[^>]*(>|$)| |‌|»|«|>/g, 'replaceWithAnyText');
}

how to find string in html tag and replace using javascript/jquery

I do not know how to find a string in the html tag and replace it with another one.
I will show it on an example.
I have something like that
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
And I would like to get such an effect
<a class="test"> <img-src="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>
Does anyone have any idea? I'm sorry for my level of English.

You can first append the img and then remove the attribute data-value.
See the code below:
$("a").append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

Assuming that you are new in JavaScript and/or jQuery, I've made a step-by-step example of a solution:
// create a pointer to your anchor
var $yourAnchor = $('.test')
// copy data attribute
var $hdata = $yourAnchor.data('value');
// remove attribute
$yourAnchor.removeAttr('data-value');
// insert html
$yourAnchor.html('<img src="' + $hdata + '">');

// If It has multiple hyperlink tag then
$('a').each(function(){
if($(this).data('value')!=undefined){
$(this).append(function(){
return '<img src="'+$(this).attr("data-value")+'">';
}).removeAttr("data-value");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="test" data-value="/content/dam/tetris-templating/framework/svg/ic-editorial-07.svg"></a>

How to parse html stored as variable inside javascript

I have a html snippet like this stored in a variable for example
var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World'
Now I want to parse this html and it must grab the value of the title and replace the tag only with the title then return the result like this using javaScript or jQuery
var parsed = Hello:smile::angry:world
Can anyone point me towards right direction on how I can do it? So that I can work it out?

You can do it using replace method with regexp:
var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World'
var result = parse.replace(/<i.*?title="(.*?)"><\/i>?/g, "$1");
console.log(result); //Hello:smile::angry:World
Here a working fiddle: https://jsfiddle.net/ste8s7eL/

You could wrap it in a container and map it to join it. Well, that would give:
var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World';
var parsed = $('<div/>', {html:parse}).contents().map(function(){
return this.title || this.nodeValue;
}).get().join('');
$('body').append(parsed);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How to get number of html elements in a string?

How to get number of HTML elements (HTML tags) in a string?
For example I have this string:
<div> some text
<div>
<label>some text</label>
</div>
</div>
Now how would I find number of html tags in this string? The result in the case above will be 3.
I did tried this, thought it will work but it didn't:
$('*').length;

var s = "<div> some text<div><label>some text</label></div></div>";
var length = $(s).find('*').andSelf().length;
http://jsfiddle.net/jCW7Z/

If you're using jQuery (and it looks like you are), the easiest way would be to use code similar to the following:
var count = $( yourString ).find('*').andSelf().length
However, if you're using vanilla javascript, the implementation would look more like this:
var temp = document.createElement('div');
temp.innerHTML = yourString;
var count = temp.getElementsByTagName('*').length;

Get all elements in the document (document.getElementsByTagName('*'))
Do a regular expression match on the element's className attribute for each element
You can use jQuery: $("html *") which will return all elements between the html tags
for names you must use $("html *").attr('name')
for values $("html *").val() or $("html *").attr('value')

Possible way to do it: http://api.jquery.com/length/
check out Find number of element in string with jQuery
for example
$( '.myClass', myData ).length;
(although this might not show outermost tags)

You can do it like this,
Put the string in to some hidden div like
$('#myHiddenDiv').html(string);
then
You can gen number of children under it
This will tell you number of html elements under the body
var count = $("#myHiddenDiv> *").length;
or:
var count = $("#myHiddenDiv").children().length;
Your div will be like this
<div id="myHiddenDiv" style="display:none"></div>

A small, self documenting, example :)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>List Elements</title>
</head>
<body>
<div>some text
<div>
<label>some text</label>
</div>
</div>
<script>
var x=document.getElementsByTagName('*');
console.log(x.length)
for (i=0;i<x.length;i++) {
console.log(x[i]);
}
</script>
</body>
</html>