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.
Related
I recently started learning/using about RegEx.
Is there a way to avoid matching words that are HTML tag attributes or belonging to tag attributes?
For example:
<p style=“position: absolute”>position: </p>
I tried
/\bposition\b\W\s/g
But that matches both instances.
Can I only match the second “position: “?
Clarification:
I am trying to search the document for words that the user enters and replace them with a span element containing those words - this is similar to "Ctrl + F". Simply having the text is not enough as I would need a way to also update the document once the text was replaced with the span elements.
Disclaimer: Use stuff like document.innerText and other DOM APIs rather than Regex.
Match HTML tags:
<.+?>/g
Match everything within HTML tags (should handle nested ones as well):
/(?<=<.+.>)(.*?)(?=<.*\/.+.?>)/g
https://regex101.com/r/2uZHli/ for example of the above.
The RegEx to match the HTML / XML tags is /(<([^>]+)>)/ig. Maybe be this is what you're looking for.
let str = '<p style="position: absolute">position: </p>';
const strWithoutTag = str.replace(/(<([^>]+)>)/ig, '');
console.log(strWithoutTag);
You can try the Regex to match your temp, which matched the second "position: ".
/(?=\b.*(?<yourKeyword>position).*\b)(?<=<[^]*>)([^<>]+)(?=<\/([^<>]*)>)/g
For
<myDIV id="myInput" contenteditable="true"></myDIV>
I want to set "abcdefg " with a space behind.
Doing this
var myInputDIV = document.getElementById("myInput");
myInputDIV.innerHTML = "abcdefg "; //does not work
myInputDIV.textContent = "abcdefg "; //does not work
How to make sure that I get the space behind? Currently, the string shown in the div is just "abcdefg", without the space.
Thanks.
You can add space in html in on of the following ways:
add as a space sign
add as a space sign
Types of Spaces in HTML
Creates four spaces between the text-
Creates two spaces between the text -
Creates a regular space between the text -
creates a narrow space ( similar to regular space but slight different) -
spacing between sentences - </br>
This link might help you. Check out the link here
SENTENCE SPACING IN HTML AND CSS
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.
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, " " );
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().