I'm building a Javascript based UI that generates code based on the UI. I got the code generation working. the code is saved in a string. I tried formatting it, indenting it, but I don't know how anymore. Is there a way to put out the code formatted?
For example if I have this string:
"<body><div><h1>Hi</h1></div></body>"
being output like this:
<body>
<div>
<h1>
Hi
</h1>
</div>
</body>
right now I'm outputing like this:
$(".output").text(string);
Take a look at code tag in html. Show your string wrapped by code tags
<code>your string</code>
Or use text area. https://jsfiddle.net/sureshatta/k1atgn6o/1/
If you are trying to achived the formatted output please have a look at Template literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
.text() use for Change the Text of any Tag.
$(".output").text(string);
.html() is use for Add the String with the Tag.
$(".output").html(string);
If you want to display code that is correctly indented and colorized, you can use a library to do that, such as highlighjs.
I'm not sure it does auto indentation, but the algorithm for that isn't that hard: just add newline and enough spaces when opening a new html tag (recursion will make this way easier).
Also, you can use js-beautify.
Related
Sorry for the title, but I don't know how to call this question. I'm using id as selector to format my ajax. But one of my div have a special format, and I don't know why. Moreover, the format generated, can't be include into my js file.
Normally the div is formated as following:
<div id= 'post_iter(<%=#post.id%>)'></div>
And when I inspect the file, the div is marked as #post_iter(4)
But when I try to copy the path, I have something like that:
#post_iter\28 4\29
The special characters are taking because of the braces
Instead of the braces try using
<div id= 'post_iter_<%=#post.id%>'></div>
<%=#post.id%> is ASP code, so theres that you have to take into consideration. So it gets prcessed to 4 from what you get.
Alright, so I've been looking around for quite a while trying to figure out how to get this to work out. So what I'm trying to do is replace anything in strings that looks like this:
foo: bar;
But only if its not inside something like this:
<div style='foo: bar; ofoo: obar'>
So the basic idea is that I want to replace css when its not inside html style attributes. I understand that you can use a for loop and check it but I would like to do this with just the regex replace.
I'm using JavaScript Regex heres what my code attempt currently looks like:
\b(.*?):(|\s)(.*?);
https://regex101.com/r/LWohvu/1
Notes:
I understand that you could use a ^ to check if it starts with it but that only works for the first line.
If I didn't cover any needed any information please feel free to comment!
According to your description, you want to replace all style in your html page except those are inside of a html tag. I've updated your regex and this worked according to your need. Please check this.
Regex:
^(?!(\=|\<))(.*?):(.*?);
Regex in JavaScript:
/^(?!(\=|\<))(.*?):(.*?);/gm
All style start with style= if this exists inside of a html tag. So, I've tried to avoid those using ^(?!(\=|\<)). This represent not start with = and <. Avoid = for style and < for html tag.
Please check this in Updated Regex.
I am using this solution here to remove script elements from ajax responses. However, when my response looks like this :
'console.log("test");https://x.ya.com/home?abc=1¤cy=EUR'
It converts the ¤ to ¤ symbol.
The result looks like this:
'https://x.ya.com/home?abc=1¤cy=EUR'
How do I avoid this?
Try using the escaped ampersand & to represent the character & in the HTML where this problem occurs, like so;
HTML
Example Link
Produces
Example Link
I used the approach as mentioned in the answer here. This removes all the script elements from the text without treating it as html (without creating a div and appending the text to innerHTML of the div), which solves the case.
No html = no html symbol decode.
Works for me!
I have a string coming from my java backend which is formatted to display in a certain way, the new line, tab and space characters are in certain positions.
How do I get this to display the same way in HTML?
For example, say I have the current string in Javascript as so:
var str = "\t\tTitle \n Some text \t\t\t more text";
Browsers typically strip out extra white space, you might need to put it inside a preformatted text block or use white-space: pre
var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);
Also yes, you need to use backslahes too, as mentioned about.
I might be late but just in order to help if a beginner like me is facing this kind of problem.
You can add a css class to the html tag where you want to display the data. In my case I am using ngFor of Angular 2. The data coming from my back end had line breaks and tabs. So I just added a class to the html tag with a css white-spacing style as follows.
Backend Data"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
And the css
.response-title {
white-space:pre;
}
This one do the job perfectly.
You can use textarea also. here is a Working Fiddle
MDN textarea
I need to convert snippets of text that contain html tags into plain text using Javascript / Node.Js.
I currently use String.Js library for that, but the problem is that when it removes the tags (using strip_tags() functions), it also removes the new line.
E.g.
<div>Some text</div><div>another text</div>
becomes
Some textanother text
Do you know how I could get rid of this problem? Maybe another library?
Thanks!
Try using Cheerio. It will expose a jQuery like interface for you on the server side. Then it's just:
var html = $(htmlstring).html();
Then just traverse the DOM for whatever elements you want and call $(element).text();
Hi this is very simple solution of your problem because I'm using reg exp and you can do what you want.
In this case we remove all tags except br tags.If you want you can remove br tag and add another tag maybe \n \t or what you want.
I hope this can help you.
Chears!!!
var html = "<div>Some text</div><div>another text</div><br />test<div>10</div>";
var removeHtmlTags = html.replace(/(<([^>!br]+)>)/ig,"");
console.log(removeHtmlTags);