I have this code:
elf='%0A';
document.getElementById('writebox').innerHTML=("hello there"+elf+"friend");
When the function that this is inside is called, the text that appears in the div is not a line break, but rather just "%0a". This confuses me, because inside another different function, elf works fine. Any ideas why?
Different encoding. %0A is URL-encoding of a newline, which you would use in (obviously) URLs. &x0a; would be the HTML-encoding of the same character that you would use in HTML, but it doesn't work, for a variety of reasons. To break a line in HTML, you can use <br> tag.
EDIT:
the problem wit a <br /> tag is that all i want is simply a new line. <br /> creates WAY too much white space
No, it doesn't:
foo<br>
bar
Related
I have the following JS string that creates markdown with a proper breakline between the two lines:
`this is some text${' '}
and this is a new line
`
Notice the two explicit spaces at the end of the first line. However, I can't figure out how to do two break lines. I've tried adding 4 spaces, but is not working.
What am I missing?
Not sure if this is exactly what you are looking for but you can throw in the line break <br /> character to let you skip as many lines as you like.
this is some text${'<br /><br />'}
this is some text${''}
You can use `` backticks for this: ES6 template strings.
let text = `this is some text${' '} \n \n and this is a new line`
You need to use a code block or raw HTML (see below). But, first let's address why your attempts do not work...
Markdown is not interpreted inside code blocks and spans. Otherwise, how would you demonstrate Markdown syntax within a Markdown document. Therefore, the double spaces to force a linebreak are ignored within your code span. Additionally, any <br> tag is assumed to be part of the code and escaped (as <br>) to be displayed in the span.
Code delimited by single backticks is a code span, not a code block. Code spans do not preserve all whitespace. They follow HTML's normal whitespace behavior of collapsing all whitespace to a single space.
If you want to preserve all whitespace, including newlines, then you should place your code in a code block. Within a code block, all newlines are preserved with no need to add extra spaces. There are a few ways to represent a code block. Of course, the standard way of indenting the block:
Some document text
this is some text${' '}
and this is a new line
More document text
Alternatively, if you are using a Markdown implementation which supports fenced code blocks (not all do), then you can used the triple backtick to delimit your block of code:
Some document text
```
this is some text${' '}
and this is a new line
```
More document text
Both of the above render the same:
Some document text
this is some text${' '}
and this is a new line
More document text
Notice that the newline is preserved. No special tricks necessary.
All of that said, if you really need a code span which contains a line break, that it outside of the scope of Markdown's syntax. However, as is always the case, anything you can't do in Markdown can be done with raw HTML. Therefore you could do the following:
<code>this is some text${' '}<br>and this is a new line</code>
Which renders as:
this is some text${' '}and this is a new line
I tried making a web page by writing
document.write("This is the first line \n And this is the second");
The desired effect is:
This is the first line
And this is the second
But I get this:
This is the first line And this is the second
I tried writing <br> inside and it worked. But Why writing an escape \n didn't? Anything I am doing wrong? I am using Firefox.
You are not doing anything wrong. Its just the \n character is valid in text related elements like, alert() and <textarea>.
The document.write() command writes to the body of the site or the display (in the HTML). Substitute <br> in place of the \n here since you are writing HTML in the page
instead of \n you have to use <br/>, so that the browser understands it
document.write("This is the first line <br/> And this is the second");
You use the <pre> tags for things like \n, and <br/> for ordinary HTML.
http://jsfiddle.net/FxpcA/
document.write("<pre>This is the first line \n And this is the second</pre>");
I really tried this a lot but I haven't got any result that actually worked.
I want to read the text of html textarea line by line using JQuery. Textarea has a fixed width and height. For example if the text area has the text like:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaa just typed a real long<br/>
word that wont fit in side of this part of<br/>
div
I would like to have a string as
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa< br /> aaaaaaaaaaaaa just typed a real long< br />
word that wont fit in side of this part of <br />div
I've tried it and it did not work out. Any suggestions?
You can use JavaScript's split function on the newline character \n. Then, call join on the resulting array.
Working example: http://jsfiddle.net/XjN72/1/
You can just remove the newlines:
text = text.replace(/\n|\r/g, "");
I'm using javascript with a super simple regex to replace a "<" with the HTML character code for it so I can place some code on my site using the pre and code tags and have it done automatically.
jsFiddle link
basically I'm trying to figure out why this js code:
var str = document.getElementById("cleanme").innerHTML;
str=str.replace(/</g,"<");
document.getElementById("cleanme").innerHTML = str;
removes the "/" in the br tag
<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>
not a huge deal because I'm just displaying code, but I'd still like to know.
it outputs this:
<p><br>this is some code</p>
thanks
I believe it has to do with the way certain browsers return the innerHTML property. If you use Google Chrome, inspect any < br/ > tag using the debugging tools and you'll notice they don't show a backslash. The same is true when Chrome returns an innerHTML property, the blackslash is stripped out.
So when you pass in:
<pre><code id="cleanme">
<p><br />this is some code</p>
</code></pre>
The browser return an innerHTML property of:
<pre><code id="cleanme">
<p><br>this is some code</p>
</code></pre>
Your RegEx is not the issue.
Your script is OK.
If you try this:
var str = '<p><br />this is some code</p>';
str=str.replace(/</g,"<");
str=str.replace(/>/g,">");
document.getElementById("cleanme").innerHTML = str;
It'll correctly print <br />.
Possibly it's effect of browser's HTML normalization.
Maybe too late to help you, and you've accepted a correct answer, but there's another big potential problem.
I tried this with Firefox 3.6.11 on Linux and 3.6.12 on Windows and they both behaved the same --
I did not see the <p><br>this is some code</p> in the Result pane on your fiddle, instead I saw simply this is some code with no markup at all.
Throwing firebug at it by adding a debugger; statement as the first line in the JavaScript pane and tracing through it, I found that str was getting a value of '\n', that is, just a newline was being returned from innerHTML and nothing else.
Thinking about this, but with no way to confirm it, I suspect it's because Firefox is building the DOM tree differently than you expect, because the HTML you're using is invalid. Inline elements are not allowed to contain block elements; specifically, the <code> tag is not allowed to contain a <p> tag, and <pre> is likewise not allowed to contain a <p> tag -- again, only limited inline elements can be used inside a <pre> tag).
I think FF is implicitly closing the code block before opening the paragraph so the innerHTML of id="cleanme" is nothing but the newline. It renders with the "pre" font as you expect because you've thrown the browser into Quirks Mode.
innerHTML does not return the literal source code, but the result of the browser's interpretation of it.
Different browsers will return very different results for innerHTML, sometimes omitting some quotes and 'optional' end tags, capitalizing some tag names and attributes, and collapsing extra white-space.
And HTML does not close open tags that can't have end tags, so they are not included either.
I want to replace a string in HTML page using JavaScript but ignore it, if it is in an HTML tag, for example:
visit google search engine
you can search on google tatatata...
I want to replace google by <b>google</b>, but not here:
visit google search engine
you can search on <b>google</b> tatatata...
I tried with this one:
regex = new RegExp(">([^<]*)?(google)([^>]*)?<", 'i');
el.innerHTML = el.innerHTML.replace(regex,'>$1<b>$2</b>$3<');
but the problem: I got <b>google</b> inside the <a> tag:
visit <b>google</b> search engine
you can search on <b>google</b> tatatata...
How can fix this?
You'd be better using an html parser for this, rather than regex. I'm not sure it can be done 100% reliably.
You may or may not be able to do with with a regexp. It depends on how precisely you can define the conditions. Saying you want the string replaced except if it's in an HTML tag is not narrow enough, since everything on the page is presumably within some HTML tag (BODY if nothing else).
It would probably work better to traverse the DOM tree for this instead of trying to use a regexp on the HTML.
Parsing HTML with a regular expression is not going to be easy for anything other than trivial cases, since HTML isn't regular.
For more details see this Stackoverflow question (and answers).
I think you're all missing the question here...
When he says inside the tag, he means inside the opening tag, as in the <a href="google.com"> tag...This is something quite different than text, say, inside a <p> </p> tag pair or <body> </body>. While I don't have the answer yet, I'm struggling with this same problem and I know it has to be solvable using regex. Once I figure it out, i'll come back and post.
WORKAROUND
If You can't use a html parser or are quite confident about Your html structure try this:
do the "bad" changing
repeat replace (<[^>]*)(<[^>]+>) to $1 a few times (as much as You need)
It's a simple workaround, but works for me.
Cons?
Well... You have to do the replace twice for the case ... ...> as it removes only first unwanted tag from every tag on the page
[edit:]
SOLUTION
Why not use jQuery, put the html code into the page and do something like this:
$(containerOrSth).find('a').each(function(){
if($(this).children().length==0){
$(this).text($(this).text().replace('google','evil'));
}else{
//here You have to care about children tags, but You have to know where to expect them - before or after text. comment for more help
}
});
I'm using
regex = new RegExp("(?=[^>]*<)google", 'i');
you can't really do that, your "google" is always in some tag, either replace all or none
Well, since everything is part of a tag, your request makes no real sense. If it's just the <a /> tag, you might just check for that part. Mainly by making sure you don't have a tailing </a> tag before a fresh <a>
You can do that using REGEX, but filtering blocks like STYLE, SCRIPT and CDATA will need more work, and not implemented in the following solution.
Most of the answers state that 'your data is always in some tags' but they are missing the point, the data is always 'between' some tags, and you want to filter where it is 'in' a tag.
Note that tag characters in inline scripts will likely break this, so if they exist, they should be processed seperately with this method. Take a look at here :
complex html string.replace function
I can give you a hacky solution…
Pick a non printable character that’s not in your string…. Dup your buffer… now overwrite the tags in your dup buffer using the non printable character… perform regex to find position and length of match on dup buffer … Now you know where to perform replace in original buffer