How to output new line for br in double quote - javascript

I have this code
<script>
var str = "first line <br /> second line <br /> third line";
$(".div_class").prepend(str);
</script>
This code do not add break like below
first line
second line
third line
Rather it shows like first line <br /> second line <br /> third line
but I want like the first one so that br tags work. How can I do this?
I am working on ruby on rails

You are outputting to text in an HTML context (such as nodeValue or innerText, you will have to use \n and ensure that the container has the CSS white-space property set to something that doesn't condence whitespace, such as pre-wrap.

Use \r\n instead of br tags. I'd post the code for you but I'm on my phone and I can't use the shortcut keys to do so.

Related

Regex check character before new line is not working

I'm trying to replace new line characters (\n) with html tag's. But this should not happen if the line ends with an another html tag.
Like this:
Line 1<br />
Line 2<br />
<p>Hello World</p>\n
Line 4<br />
So my question now is why isn't the following regex working? Now are on every line tags not just on the lines without the <\p> tag.
/(?!<.*>)\n/g
That regex is working if I dont want to have a <\br> tag if the next line doesnt contain html tags.
/\n(?!.*<.*>)/g
You need some logic with the following expression here:
.+<[^\n\r]+>$|(.+)
In JavaScript:
var html = `Line 1
Line 2
<p>Hello World</p>
Line 4`;
var converted = html.replace(/.+<[^\n\r>]+>$|(.+)/gm, function(match, group1) {
if (typeof(group1) == "undefined") return match;
else return group1 + "<br>";
});
console.log(converted);
The idea is to match lines ending with a potential tag but to capture those without, see a demo on regex101.com.

<br> is removed when I alert() the content of PRE tag

I want to show the content of this <pre> tag using alert():
<pre> This is the IRNIC Whois server v1.6.2.<br> Available on web at http://whois.nic.ir/<br> Find the terms and conditions of use on http://www.nic.ir/<br> <br> This server uses UTF-8 as the encoding for requests and responses.<br><br> NOTE: This output has been filtered.<br><br> Information related to 'shirzadi.ir'<br><br><br>domain: shirzadi.ir<br>ascii: shirzadi.ir<br>remarks: (Domain Holder) Ehsan Shirzadi<br>remarks: (Domain Holder Address) Ferdowsi Blv , Mahdi 13 ST, Mashhad, Khorasan razavi, IR<br>holder-c: es372-irnic<br>admin-c: es372-irnic<br>tech-c: to52-irnic<br>bill-c: to52-irnic<br>nserver: wres1.irpowerweb.com<br>nserver: wres2.irpowerweb.com<br>last-updated: 2014-01-16<br>expire-date: 2017-10-08<br>source: IRNIC # Filtered<br><br>nic-hdl: es372-irnic<br>person: Ehsan Shirzadi<br>e-mail: ehsan.shirzadi#gmail.com<br>address: Ferdowsi Blv , Mahdi 13 ST, Mashhad, Khorasan razavi, IR<br>phone: +985117688851<br>fax-no: +989155066372<br>source: IRNIC # Filtered<br><br>nic-hdl: to52-irnic<br>org: Fanavarie Etelaate Towseye Saman (Mihannic)<br>e-mail: sales#mihannic.com<br>source: IRNIC # Filtered<br><br></pre>
when I read this content using xx = $('pre').text() and then alert(xx), the is no <br> but when I hard code this content in a variable and alert() I can see them. What is the problem here? finally I want to split the contents by <br>
Try $('pre').html() instead of text(). This should preserve < br > as well as other tags / html entities.
Edit
For completeness, as gillesc said, < br > and other tags will be stripped in alert() (since it does not support inner html). Therefore combination of .html() and replace method is required. Newline can be replaced by \n. Full code would look like this:
xx = $('pre').html().replace(/<br>/g, "\n");
alert(xx);
text() will strip the tags out so use html() instead but alert doesn't support tags so you will need to convert your <br/> before sending it to laert
See this post on how to do just that.
HTML Tags in Javascript Alert() method
Using text() keeps only the inner text, not the HTML markup.
Use html() and eventually replace each captured <br /> by the JS new line character, like said here : How replace HTML <br> with newline character "\n"
Make Like This
<pre id="MyID">This is Test <br /> This is test</pre>
and javascript code
<script>
alert(document.getElementById('MyID').innerHTML);
</script>

Newline does not work on textarea replace

I'm trying to replace a word in a textarea with another text, but I cannot seem to get newlines to work.
<input type="text" id="testing" value="Newline \n test" /><br />
<textarea>test</textarea><br />
<button>Test</button>
$("button").on("click", function() {
$("textarea").text($("textarea").text().replace(/test/g, $("#testing").val()));
});
Press the button. It will not replace the \n with a new line. I tried <br />, <br> (incorrect HTML), %0A and
but it still does not work.
Fiddle
You need to replace the character string '\n' (2 characters '\','n') with the actual \n line break character.
This should do what you need.
var textBoxline = $("#testing").val().replace(/\\n/g, '\n');
$("textarea").text($("textarea").text().replace(/test/g, textBoxline));
You will still need to make allowances for leading/trailing spaces around the \n itself.

How to copy newline characters from HTML div to textarea in jQuery?

Consider the following HTML page fragment:
<div id='myDiv'>
Line 1.<br />
Line 2<br />
These are &ltspecial> characters & must be escaped !##><>
</div>
<input type='button' value='click' id='myButton' />
<textarea id='myTextArea'></textarea>
<script>
$(document).ready(function () {
$('#myButton').click(function () {
var text = $('#myDiv').text();
$('#myTextArea').val(text);
});
});
</script>
First, there is a div element with id myDiv. It contains some text similar to what might be retrieved form a SQL database at runtime in my production web site.
Next, there is a button and a textarea. I want the text in myDiv to appear in the textarea when the button is clicked.
However, using the code I provided, the line-breaks are stripped out. What can I do about this, taking into consideration that escaping special characters is absolutely non-negotiable?
Your code works great for me in both Firefox and Chrome: http://jsfiddle.net/jYjRc/
However, if you have a client that doesn't do what you want, replace <br>s with newline characters.
Edit: Tested in IE7 and the code breaks. So I updated the fiddle with my suggestion: http://jsfiddle.net/jYjRc/1/
Do your HTML like so:
<div id='myDiv'><pre>
Line 1.
Line 2
These are &ltspecial> characters & must be escaped !##><>
</pre></div>
And now .text() will return the text exactly as you specify it in the <pre> tag, even in IE.

html label inserting newline

I'm trying to set some text to a label dynamically using jQuery. But i can't get the <br> or \n to render and give me new lines. It all shows up on the same line and wraps.
here is my code On JsFiddle
My html:
<label id="myLabel" />
My Javascript:
$("#myLabel").text("This is my first line \n This should be my second line.");
text() will escape any html code, so instead use html()
$("#myLabel").html("This is my first line <br /> This should be my second line.");
The problem is that .text() will ignore your html. You should use .html(), soy u can put whatever html you want inside an element. So you'd have:
$('#myLabel').html('This is my first line <br/> This should be my second line.');
Hope this helps. Cheers
Try this instead:
$('#myLabel')
.html('this is my first line<br/>This should be my second line.');

Categories