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.
Related
I try to display a multi-lined text but it always apears as one line.
For example:
var text ="line 1. \n line 2. \n line 3."
It it supposed to be displayed like :
line 1.
line 2.
line 3.
but instead I end up with
line 1. line 2. line 3.
in a rendered html page.
I tryed jquery text and html methods but not working.
Even through angularjs, it is always the same.
$('#element').text(text);
$('#element').html(text);
or
<div>{{ text }}</div>
Isn't there a way to get what I'm expecting?
Try Something like
<div class="angular-with-newlines">
{{ text }}
</div>
css
/* in the css file or in a style block */
.angular-with-newlines {
white-space: pre-wrap;
}
This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you want to break on newlines, but also collapse multiple spaces or white space preceeding the text (very similar to the original browser behaviour), you can use:
white-space: pre-line;
May be, this is what you want...
<textarea id="text"></textarea>
<p id="text2"></p>
<button onclick="multi_line_textarea()">on textarea</button>
<button onclick="multi_line_para()">on paragraph</button>
<script>
function multi_line_textarea(){
var text = "line 1. \nline 2. \nline 3.";
var el = document.getElementById('text');
el.innerHTML = text;
}
function multi_line_para(){
var text2 = "line 1. <br/>line 2. <br/>line 3.";
var el2 = document.getElementById('text2');
el2.innerHTML = text2;
}
</script>
Here's a jsFiddle:https://jsfiddle.net/p984fd1m/2/
Hope that helps..
Try like this.
<p style="white-space: pre-line;">{{ text }}</p>
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.
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.
I am trying to assign to <p> element a large amount of text, which includes some <br /> tags inside, as it's html. I am using the .html() method from JQuery, but it wont show the line breaks.
My code:
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
it does add the text as 'myPClass' html, but it totally ignores the <br/> tags.
the result i am getting is:
<p class='myPClass'>Hello, this is a pretty large text with some line breaks inside</p>
so it would look like:
"Hello, this is a pretty large text with some line breaks inside"
what i want my result to be:
<p class='myPClass'>Hello, this is a pretty <br/> large text with some <br/> line breaks inside</p>
so it would look like:
"Hello, this is a pretty
large text with some
line breaks inside"
what is wrong with my code? or how can i get to do this?
You can also try the following:
var text = "Hello, this is a pretty" + "<br/>" + "large text with some" + "<br/>" + "line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
Try this
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'></p>");
$('.myPClass').html(text);
Consider the following HTML page fragment:
<div id='myDiv'>
Line 1.<br />
Line 2<br />
These are <special> 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 <special> 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.