Create a line break in the text inside span - javascript

I am using the following HTML in the application:-
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
But am not able to create line breaks in the text. I have also tried using \n,\r and br tag but nothing seems to break. The expected output is:-
I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana Grade:10th Teacher:Meeta"}

If data displayed in span contain the character \n and you can't modify it before display it in dom
you can use a simple js function to replace all \n occurence by <br/>
var span = document.getElementById('my-data');
span.innerHTML = span.innerHTML.replaceAll('\\n', '<br/>');
<span id="my-data">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana \n Grade:10th \n Teacher:Meeta"}</span>
just be careful to mastered dom modification when you replace innerHTML. here there is no risk but if you have based replace on user input you can have xss issue

use <br> instead of \n. Do you want output like this with a line break?
<span style="display:inline-block;white-space: pre-line">I would like to discuss this: {"incidentId":"TG00040","desc":"Patient Details","reportdetails":"Patient Name:Bhawana <br> Grade:10th <br> Teacher:Meeta"}</span>

Related

JavaScript replace with an exception string

I have the following html tag (which is custom):
<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>
Simple enough. Now, I'm trying to make the HTML tags show as plain text, instead of being rendered as a separate element. To do that, I am replacing all the < with <, and all the > with >
tagHTML.replace(/</g, '<')
The problem: This also replaces the <br> tags, which doesn't create a new line. Here is the solution, in a perfect world:
tagHTML.replace(/</g, '<', {exceptions: '<br>'})
Obviously, that's not how it works. Any help is appreciated.
Thanks!
Negative lookahead for <br> before matching <.
const text = `<meltdown-code data-lang="HTML">
<span><br>
<p>Hi</p><br>
</span><br>
</meltdown-code>`;
const output = text.replace(/(?!<br>)<([^>]+)>/g, '<$1$gt;');
console.log(output);
<code></code>

How to replace \n new line character in string so that <p> tag can show new line

In a react application I am working on there is a condition that:
when a string has a new line character the
<p>{string}</p> tag in which string is to be displayed should be replaced with HTML new line character.
But of course this does not work.
Things I have already tried but did not work for me:
const string = Hello\nHii
<p>{string.replace('\n', <br />)}</p>
output: Hello<br />Hii
<p>{string.replace('\n', &)}</p>
output: Hello Hii
I found the above suggestions in the following answers:
the val of a textarea doesnt take new lines into account
There are two options.
Using pre tag or css property white-space: pre:
<p><pre>{string}</pre></p>
Using dangerouslySetInnerHTML:
<p dangerouslySetInnerHTML={{__html: string.replace('\n', '<br />')}}></p>

how to remove <textarea> whitespace

I want a <textarea>, as the one I'm writing in right now actually.
How do I make the textarea behave like this one? I want it to start at the beginning and not give me whitespace to erase when clicking in the middle of it.
HTML
<p>
<textarea class="noteToAdd">
</textarea>
</p>
Any ideas?
That what is between the start tag <textarea> and end tag </textarea> is it's value. Even whitespace is seen as 'value'. You probably have something like this: (note the whitespace)
<textarea>
</textarea>
So, to remove that, remove all whitespace and place the start and ending tag directly after each other.
<textarea></textarea>
Remove your whitespace between the textarea tag. Like as
<textarea></textarea>
Try this one :
<p>
<textarea class="noteToAdd">
</textarea>
</p>
Make sure there is no whitespace between your <textarea> and </textarea> tags, any whitespace here will show up in your text area.
More help is not possible without you providing the HTML/CSS.
Remove the extra white space in between the textarea opening and closing tags as they take up that space. You write your content inside <textarea></textarea>
<p>
<textarea class="noteToAdd"></textarea>
</p>

how to remove trailing html break from string?

I have a string below and I want to remove the trailing but I'm struggling. Any help?
This is a string<br>
next line<br>
So after my function, the string should be
This is a string<br>
next line
Doing this code below doesn't seem to be working. Well, it works but it doesn't clear out two trailing breaks.
mystring=mystring.replace(/<br>$/,'');
So if my string is actually:
This is a string<br>
next line<br>
<br>
then the code above just returns
This is a string<br>
next line
<br>
If you want to remove all trailing <br>s, then use a quantifier:
/(<br>\s*)+$/
\s matches any white space characters, so even if there is line break between continuous <br>s, it will still match.
DEMO
If it's the contents of an HTML element, you can just use jQuery to remove the element:
$('#container').children('br').last().remove();
If it's a string, you can do something like this (still leveraging jQuery):
var cleaner = $('<div />').html(mystring);
cleaner.children('br:last-child').remove();
mystring = cleaner.html();
I prefer this over splitting on a string or your current RegEx because you're not handling the scenario of a BR tag like this: <br />.
http://jsfiddle.net/TTg3p/
I tested your code, and it seems to work. I pasted the following into a file and then viewed in firefox, and clicked view source. The second br was not visible in the source.
<html>
<body>
<script>
var mystring = 'This is a string<br>\n next line<br>'
mystring=mystring.replace(/<br>$/,'');
document.write(mystring);
</script>
</html>
Perhaps your mystring variable has an actual linebreak (\n) at the end of it after the br, so your regular expression is not matching?
Try this:
mystring.split('<br>').slice(0,-1).join('<br>');
demo
:)
If you want to remove the last trailing <br> inside an element, you can use this:
const element = document.getElementById('element')
console.log('Before:', element.innerHTML)
const last = element.childNodes[element.childNodes.length - 1]
if (last.tagName === 'BR') last.remove()
console.log('After:', element.innerHTML)
<div id="element">Some text<br>other text<br></div>

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.
From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?
To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first
As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.
<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.
i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')
Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)
Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.

Categories

Resources