We Keep Coding

String with new line and tabs to display in HTML

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

JQuery or Javascript code to change the font of the last character in html text

I know it sounds odd, but I'd like to create an html class that will change the font of the last character in the tagged text.
while css lets you change the fontsize, color of the first character of some strings, there is sadly nothing to change the font of the last character.
Is it best to use the charAt(length-1) in JS or is there some way in JQuery to alter the last character of the selected class?

You'll have to fetch, change, and then reput the html content of your texts.
I made a fiddle to illustrate it :
http://jsfiddle.net/dystroy/3maG5/
Be aware that there are risks : without greater analysis you may have problems if your paragraphs (or other texts) end with an element.
EDIT : I just see that eyurdakul made a few seconds before me a very similar answer. I think he's correct too. I let this answer as a complementary one to give a testable example. Of course, if one answer should be accepted, it's probably eyurdakul's one, he was faster :)

give them some class for the selector, .last for example;
$(".last").each(function(){
var inner = $(this).html();
var firstPart = inner.substring(0, (inner.length-1));
var secondPart = inner.substring((inner.length-1), inner.length);
$(this).html(firstPart);
$("<span/>").css("font", "Arial").html(secondPart).appendTo($(this));
});

"<" sign not showing in javascript?

I have a div-element that I want to show the symbol '<'.
div-element.innerHMTL = '<';
The string actually do not appears, I think the problem lies in that the browser thinks that it is a beginning of a tag element
Anyone seen this problem before?

You should use an HTML entity - <. This will be displayed by the browser as <, rather than being interpreted as the start of an HTML tag.
Here's a handy list of common HTML entities: http://www.danshort.com/HTMLentities/

divElement.innerHTML = '<';

innerHTML sets does not encode and can be used to set html elements.
innerText sets encodes and cannot be used to set html elements.
You should use innerText when you just want to set text or you should encode the text when you want to mix html with text

This might be useful link which shows all symbols
http://www.w3schools.com/HTML/html_entities.asp

HIde word with JavaScript

I am not developer so I need help from you guys.
My Problem is simple.
I just want javascript to hide word before "."
Example :
say for google.com
I just want word ".com" tobe print.
Please note that my content is dynamic so google.com will keep changing everytime to google.net or yahoo.com...... so on..
Thanx in advanced.

Well, you didn't mention quite a lot, like how do you get your input? What to do if you have no dot, are many dots?
One simple solution is:
var s = 'before.after';
var pos = s.indexOf('.');
if(pos >= 0) // here, if I don't find a dot, keep s as it is.
s = s.slice(pos);
alert(s); // .after

Here's a tutorial for you on how to parse URL's in Javascript.
http://java-programming.suite101.com/article.cfm/how_to_get_url_parts_in_javascript

If the content you want to modify is in HTML content, the easiest way is to do string replace.
http://www.bradino.com/javascript/string-replace/
Before using replace, you should first locate the content, by its container ID or Name.
http://www.tizag.com/javascriptT/javascript-getelementbyid.php
http://www.eggheadcafe.com/community/aspnet/3/43154/getelementbyname.aspx
Hope this helps.

css to replace characters in paragraph tag

Already checked exisitng questions for this, but didn't find an exact match.
My aim is to replace characters (like spaces) on a webpage with a small image using css.
Example:
<p><span>This is a text</span></p>
becomes:
<p><span>ThisIMGisIMGaIMGtext</span></p>
(where IMG stands for a visible image (middot-pic for a space f.e.))
I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?

Since you're not having an ID, I assume you want it on all <p><span>...</span></p>. jQuery will help you:
$(document).ready(function(){
$("p span").html($("p span").html().replace(/ /g,'<img src="yourimg.gif" />'));
});

No, css doesn't have this ability. The only such things it can do are text-transform, which can do things like make it all uppercase.

If a monochromatic image will suffice, you could use a custom web font that has the glyph of your choice in place of the usual empty space character (U+0020).