I want to add a linebreak in Javascript, but \n is not working and nothing else I found so far is not working (like <br> or \n). Also, because of the programming I cannot use .appendChild.
for (i=getchilds();i<number;i++){
container.appendChild(document.createTextNode("\n" + "Pers. " + (i+1) + " \u00a0"));
var input = document.createElement("input");
input.type = "number";
container.appendChild(input);
}
I think you may be confusing whitespace with the representation of whitespace. In your case you're appending characters that represent white-space to a string that you intend to be displayed as a line-break. I assume you're then appending it to an element whose style is not set to display it as white-space.
There are four basic ways to fix this:
Use an ordered list. If you can, do this, since it will be both structural and semantic. Notice the link shows how to control the list-item text (controlling the start number is more challenging).
If the container-referenced element accommodates this, add white-space: pre to it's style. This will cause your line-breaks to come into view. It's best to do this with CSS, but you can do it with Javascript too.
Replace the \n with a <br>. Denys Séguret has an example of this.
Use a pre tag for the container-referenced element. <pre> automatically respects and displays line-breaks in content. This of course implies your content accommodates using a pre-formatted tag.
Change your code to insert into a textarea or a set of pre tags.
You might see your code injecting a single space in place of the line breaks in a plain text input of your browser is Firefox chrome or opera.
You can't insert \n in text node and have them correctly rendered in an element with standard white-space rendering.
Two solutions here:
insert <br> elements
container.appendChild(document.createElement("BR"));
container.appendChild(document.createTextNode("Pers. " + (i+1) + " \u00a0"));
use innerText in SPAN
var node = document.createElement("SPAN");
node.innerText = "\n Pers. " + (i+1) + " \u00a0";
container.appendChild(node);
The first one is the most relevant in your case, but the fact innerText doesn't remove newlines (contrary to textContent) is often useful.
Related
I want to render a text as common HTML and parse occurrences of [code] tags that should be output unrendered - with the tags left untouched.
So input like this gets processed accordingly:
<p>render as HTML here</p>
[code]<p>keep tags visible here</p>[/code]
<p>more unescaped text</p>
I've regexed all code-tags but I have no idea how to properly set the text of the element afterwards. If I use jQuery's text() method nothing gets escaped, if I set it with the html() method everything gets rendered and I gained nothing. Can anybody give me a hint here?
Try replacing [code] with <xmp> and [/code] with </xmp> using regex or alike, and then use the jQuery html() function.
Note that <xmp> is technically deprecated in HTML5, but it still seems to work in most browsers. For more information see How to display raw html code in PRE or something like it but without escaping it.
You could replace the [code] and [/code] tags by <pre> and </pre> tags respectively, and then replace the < within the <pre> tags by & lt;
A programmatic solution based on Javascript is as follows
function myfunction(){
//the string 's' probably would be passed as a parameter
var s = "<p>render as HTML here</p>\
[code]<p>keep tags visible here</p>[/code]\
<p>more unescaped text</p>";
//keep everything before [code] as it is
var pre = s.substring(0, s.indexOf('[code]'));
//replace < within code-tags by <
pre += s.substring(s.indexOf('[code]'), s.indexOf('[/code]'))
.replace(new RegExp('<', 'g'),'<');
//concatenate the remaining text
pre += s.substring(s.indexOf('[/code]'), s.length);
pre = pre.replace('[code]', '<pre>');
pre = pre.replace('[/code]', '</pre>');
//pre can be set as some element's innerHTML
return pre;
}
I would NOT recommend the accepted answer by Andreas at all, because the <xmp> tag has been deprecated and browser support is totally unreliable.
It's much better to replace the [code] and [/code] tags by <pre> and </pre> tags respectively, as raghav710 suggested.
He's also right about replacing the < character with <, but that's actually not the only character you should replace. In fact, you should replace character that's a special character in HTML with corresponding HTML entities.
Here's how you replace a character with its corresponding HTML entity :
var chr = ['&#', chr.charCodeAt(), ';'].join('');
You can replace the [code]...[/code] with a placeholder element. And then $.parseHTML() the string with the placeholders. Then you can insert the code into the placeholder using .text(). The entire thing can then be inserted to the document (run below or in JSFiddle).
var str = "<div><b>parsed</b>[code]<b>not parsed</b>[/code]</div>";
var placeholder = "<div id='code-placeholder-1' style='background-color: gray'></div>";
var codepat = /\[code\](.*)\[\/code\]/;
var code = codepat.exec(str)[1];
var s = str.replace(codepat, placeholder);
s = $.parseHTML(s);
$(s).find("#code-placeholder-1").text(code);
$("#blah").html(s);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Text
<div id="blah">place holder</div>
Around
The code above will need some modifications if you have multiple [code] blocks, you will need to generate a unique placeholder id for each code block.
If you may be inserting untrusted structure code, would highly recommend using large random number for the placeholder id to prevent a malicious user from hijacking the placeholder id.
I want to keep space when I use document.write();
var text = "many spaces";
document.write(text);
But the output is "many spaces".
How to do that please?
PS: I've tried with innerHTML but it does the same:
<p id=demo></p>
document.getElementById("demo").innerHTML = "many spaces";
It's not document.write, it's default behavior of how spaces are rendered. W3C specification explicitly defines:
Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.
If you want to preserve spaces you can either render content in <pre> tag:
var text = "many spaces";
document.querySelector('pre').innerHTML = text;
<pre></pre>
... or use white-space: pre CSS rule:
var text = "many spaces";
document.querySelector('div').innerHTML = text;
div { white-space: pre;}
<div></div>
There is one more option, using however I would not recommend it since this not the same at all as normal white space character (because it's non-breaking). It is also can be non convenient to convert original text spaces into .
Use wich means Non Breaking SPaces;
So write this :
var text = "many spaces";
The reason is that HTML simplifies the text display. There are many reasons in web programming to produce many white spaces that have no interest. So it's easier to remove duplicate spaces than to try to avoid these duplicates.
If you want add space for better display, you should probably also use CSS.
You should use instead of blank space.
This is what I would do:
var text = "many spaces";
document.write(text.replace(' ', ' '));
Note that this is not a problem with document.write, rather how the blank spaces are rendered in HTML.
When adding in text with small whitespace appended to it for alignment purposes the whitespace is trimmed off (the whitespace is added in c# so by the time it gets to front end Javascript it cannot be edited - it would be nice to just use some CSS to do this but it is not an option).
Here is what I tried so far:
var zlp = document.getElementById("testDiv")
zlp.innerHTML = "hello hello"
var zzz = document.createTextNode("hello hello")
zlp.appendChild(zzz)
<div id="testDiv"></div>
Both of which produce hello hello.
White space characters are usually collapsed in HTML (by default).
You can replace it with the entity:
var text = text.replace(/\s/g, ' ');
\s will match any white space character, such as space, tab and new line. If you only want to replace space, use / /g instead.
Other options which avoid string manipulation:
Put the text in a pre element.
Set the CSS 2 white-space property to pre as #Esailija pointed out. You can always add CSS properties dynamically to elements, they don't have to be specified in a style sheet.
use
zlp.innerHTML = "hello hello";
Like everyone else just said.
use a html tag 'pre'
Example:
<pre>
A line
A line with indent
</pre>
result:
A line
A line with indent
White space is collapsed in HTML. It's not a JS issue, the same would happen if you typed that manually in the HTML document. You need to replace the spaces with
zlp.innerHTML = "hello hello".replace( / /g, " " );
I am using this code to insert a new line in a content editable HTML document:
execCommand("insertHTML", false, '\n');
This works for me in Chrome and Safari, but it results in < br> or a new paragraph in other browsers. Because I am editing < pre> tags, I do not want the browser to change \n to a < br>. How can I do this?
I have already tried to use functions like range.insertNode() or to manipulate insertBrOnReturn in FireFox, but it is always the same. Isn't there a way to insert a \n in the document without the browser changing my input?
I think there is no cross-browser working way to add a \n... I am not THAT familiar with contenteditable but since it is changing the innerHTML you could maybe do something like
var currentContent = myContent; // "currentContent holds" the current content
execCommand("insertHTML", false, '\n'); // inserts the line break
if (newContent !== currentContent + '\n') { // "newContent" holds the content afterwards
console.log('use String.prototype.replace to replace created tag with "\n"');
}
I'm assuming that you want to save the edited content afterwards, so how about replacing all <br>s with \ns when getting the content of the tag? Just like this:
document.getElementById("editable").innerHTML.replace(/<br>/g, "\n");
edit: You may also just use the innerText instead of the innerHTML. When doing so, all newlines are presented as <br> tags (at least I got that result in Chrome). This solution isn't great, but it's at least always the same.
my coding:
...
<textarea name="TextArea1" id="TextArea" style="height ; width" ></textarea>
...
<script type="text/javascript">
var txt_element = document.getElementById("TextArea");
document.write (txt_element.childNodes[0].nodeValue);
</script>
...
but it doesn't recognize "enter/return" key hited instead it shows " "
Many thanks
To expand on Chris's answer, the problem is that the browser is rendering the text you write in the same way as it renders any other piece of html, which means white space (including carriage returns) is treated as a word separator, not a line or paragraph separator. And multiple consecutive white space characters are condensed down to a single space. This is explained further in the html spec.
This is different to how it treats text within a textarea element.
So as Chris suggested, you need to replace carriage returns in your string with html <br> elements:
var enteredText = document.getElementById("TextArea").value;
var updatedText = enteredText.replace(/\n/g, '<br />');
document.write(updatedText);
Note: you should be able to get the textarea's value directly with .value rather than saying .childNodes[0].nodeValue.
Note 2: I second what Chris said about document.write() - it is usually not the best option.
Note 3: If you're catering for non-Windows system you may also need to replace \r.
Text areas use \n to designate a new line, something along these lines should work:
string = document.getElementById("TextArea")childNodes[0].nodeValue;
string = string.replace(/\n/g, '<br />');
document.write('string');
Not sure if you're just goofing around, but I feel compelled to mention that generally speaking you should never use document.write().