Prevent Table Cell to Convert HTML Entities - javascript

<table>
<tr>
<td>></td>
</tr>
<tr>
<td>&GT</td>
</tr>
</table>
I have the above code for table cells having html entities. Also, I have a related question (which is now answered) having the same details but with different scenario.
The goal is to output the string as is, without converting it to HTML Entities. For example the string "Project &GT" will be outputted as is.
Below are 2 solutions I've tried but still does not meet my requirements (these are answers from question)
A. First Row - this answer does not correctly display the string. It displays the converted html which is ">". But this solution works on non-table elements like tooltips and spans. Also, if the string has different casing (Project&gT) it outputs the casing from the original string.
B. Second Row - this answer do display the string correctly. It does not output the converted string. But my problem here is if the string has different casing (Project&gT) it will output the case you have encoded on the logic (Project&GT - since this is the one we encoded on the HTML).
Is there a way to have an unconverted string and preserve its casing?
UPDATE: Forgot to mention that I am using this with angular.datatable's renderWidth.
.renderWith(function(data) {
return $filter('customFilter')(data)});
I've used it together with a customFilter to stop the conversion. In my debugging, the filter returns the correct result but it always has a problem when it renders to table cells . This is why I directly asked the question about prior to this update

If you use angular, use ng-bind it's alwais give you the plain text.
Hire is the link
To get &gt ; use ng-bind
to get > use ng-bind-html
Try it.

You could do something like this:
function findNoParse(){
$('noparse').each(function(){
if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
$(this).text($(this).html()); //makes the html into plaintext
$(this).attr('tagchecked', 'true'); //says that tag has been checked
}
});
}
In HTML
<noparse>Link</noparse>
I have created a fiddle. Please take a look. Fiddle

Related

Why is the browser changing my single quotes to double and ruining my JSON in the data attr?

This should be way easier than it is, but it's got me stuck.
Im putting some JSON in an input data attribute and the quotes on the first key are closing the attribute.
Here's what I'm trying to do:
var html = `<input type="checkbox" data-values='${dataVals}' />`;
Where dataVals is a JSON string like this
'{"checked":true,"unchecked":false}'
But it's showing up in the browser like this:
<input type="checkbox" data-values="{"checked":true,"unchecked":false}">
And the browser is reading it essentially as though it's this.
data-values="{"
Which obviously isn't what I want.
I'm clearly missing something. Any thoughts?
Combination of #T.J. Crowder and #Teemu
I added a replace at the end of the json string to replace double quotes with "
JSON.stringify({ ... }).replace(/\"/g, """)
Then also stopped trying to run JSON.parse() when I wanted to get the value later since $.data('values') already returns a javascript object (when it can).
JSON.parse($(this).data('values')) => $(this).data('values')

Javascript regex to replace ampersand in all links href on a page

I've been going through and trying to find an answer to this question that fits my need but either I'm too noob to make other use cases work, or their not specific enough for my case.
Basically I want to use javascript/jQuery to replace any and all ampersands (&) on a web page that may occur in a links href with just the word "and". I've tried a couple different versions of this with no luck
var link = $("a").attr('href');
link.replace(/&/g, "and");
Thank you
Your current code replaces the text of the element within the jQuery object, but does not update the element(s) in the DOM.
You can instead achieve what you need by providing a function to attr() which will be executed against all elements in the matched set. Try this:
$("a").attr('href', function(i, value) {
return value.replace(/&/g, "and");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
link
link
Sometimes when replacing &, I've found that even though I replaced &, I still have amp;. There is a fix to this:
var newUrl = "#Model.UrlToRedirect".replace(/&/gi, '%').replace(/%amp;/gi, '&');
With this solution you replace & twice and it will work. In my particular problem in an MVC app, window.location.href = #Model.UrlToRedirect, the url was already partially encoded and had a query string. I tried encoding/decoding, using Uri as the C# class, escape(), everything before coming up with this solution. The problem with using my above logic is other things could blow up the query string later. One solution is to put a hidden field or input on the form like this:
<input type="hidden" value="#Model.UrlToRedirect" id="url-redirect" />
then in your javascript:
window.location.href = document.getElementById("url-redirect").value;
in this way, javascript won't take the c# string and change it.

Javascript - search for HTML elements in string

I have string with html elements. There are tables with captions. I need to find table which has caption with certain text and then return this table - as a string.
What is the best way to do this with simple javascript, without any libraries ?
F.e. this is an initial string
<table border="1"><caption><strong>First</strong></caption><tbody><tr><td>...</td></tr></tbody></table><table border="1"><caption><strong>Result</strong></caption><tbody><tr><td>...</td></tr></tbody></table><table border="1"><caption><strong>Last</strong></caption><tbody><tr><td>...</td></tr></tbody></table>
I want to get this string :
<table border="1"><caption><strong>Result</strong></caption><tbody><tr><td></td></tr></tbody></table>
Any advice or algorithm how to effeciently resolve this problem ? The challenge is to resolve it with javascript without using any third-party libraries and also without converting text into xml or something similar (because some of html code is not well formatted and it causes errors).
I have not had time to completely test this, but you might be able to try using a regular expression and the match() function. Assuming your table string is in a variable called str, then something along the lines of
var res = str.match(\b<table\.\w+_</table>\b);
res will be an array of matches of strings that begin with '', which you could then check to see which string contains the caption that you need.
Hope that helps!

Formatting numbers in a td

My code gets some totals that look like this:
var totals = { someInt:5, someFloat:7.555, someNumberIDoNotNeed:7};
I'd like to present a subset of these in a table in a view (via a jade template). My idea was to put the ones I want into an object, then let JSON.stringify do the formatting for me. I wanted one of the values to be rendered boldface:
var needed = {};
needed["The int is"] = parseFloat(totals.someInt);
needed["The float is"] = "<b>" + parseFloat(totals.someFloat).toFixed(2).toString() + "</b>";
// get rid of the curly braces and add a space after the commas
var string = JSON.stringify(needed).replace(/[{}"]/gi, '').replace(/,/gi, ', ');
Then in my jade view:
td= string
Reviewing this in the Chrome inspector, the string seems to be what I hoped for:
<td>
"The int is:5, The float is:<b>7.55</b>"
</td>
But the browser isn't respecting the markup. I just see the braces and b (< b >) in the output. I've tried a few variants in formatting the output, but the basic problem of the marking showing remains the same. Would appreciate any pointers in the right direction.
(I tried to quote the output using SO's > quote formatting, but it actually respects the in my markup, and this question shows up with the bold output just how I want it. Somehow SO gets this right but I cannot!)
I've never heard of Jade before, but I took a quick look at their editable demos and reference and noticed that td= string syntax escapes html entities but td != string does not.
So that seems to be your problem. You want to keep the html intact in this case. So give td != string a try.

jQuery replacing spans in node+jade combo

Perhaps this is expected, but I found it odd since I am now starting with jQuery.
So, I am writing an application using node and jade. In the index.jade I have a statement of the form
p Welcome subscriber
span(id="subscriber") someID
Now once the connection is established between the client and the server, the server sends a welcome JSON message with some data. One of them is the id of the client which I want to replace above. Once the client receives the welcome JSON message it initializes the appropriate structures and then I make a call to a function loadStats:
function loadStats() {
var myText = "" + myData.id + ".";
$('#subscriber').text(myText);
$('#subscriber').html(myText);
};
In the screen I can see that the text "someID" is replaced by the ID of the client. However, when I actually inspect the html code of the page that I am looking at I see a statement of the form:
<p>Welcome subscriber <span id="subscriber">someID</span></p>
In other words in the actual HTML code the text "someID" has not been replaced. Is this something expected? How was the replacement done? Moreover, it appears that working with either of the statements
$('#subscriber').text(myText);
$('#subscriber').html(myText);
gives the replication on the screen but not on the actual html content of what is presented on screen. Is this the correct behavior? From what I understood (and expect) the .text() replaces the visual data of the element with the specific id and the .html() replaces the content. Am I missing something?
Thanks in advance. jQuery rookie here.
Two rules for expressions in pug:
In attributes you use quotes to output literal text and you leave the quotes out when you want to use a variable, and
For the content of a tag you use an equals sign when you want pug to evaluate an expression, or don't put anything if you want literal text
So with those rules in mind, looking at your code you will output the attribute "subscriber" as a literal and "someId" as a literal.
span(id="subscriber") someID
Results in:
<span id="subscriber">someId</span>
You wanted both to be dynamic so remove the quotes in the attribute and put an equals sign after the element:
span(id= subscriber)= someID
This will dynamically replace both with variables.

Categories