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, "");
Related
I have a textarea in React that also accepts newLine characters. It is correctly stored in mongoDB with the newLine characters. When I retrieve it back to React and try to display it in table <td>, it shows with spaces. But if I put it on console, it is correctly shown. I guess that is because in HTML newline character is <br >. How can I do this?
I tried replacing '\n' with <br> using replace(), but then <br> gets concatenated as a string literal.
"items" shown in mongoDB
How its displayed in table
Correctly shown in console
Code
As MrBens suggested, the simplest solution is to use the pre (preformatted text) tag. For example:
<td><pre>This is
two lines</pre></td>
Would result in:
This is
two lines
There's also a similar CSS style, whitespace: pre or whitespace: pre-wrap. The MDN has details about that also.
I have tag like <span style="font-size:10.5pt;\nfont-family:\nKaiTi"> and I want to replace \n within tag with empty character.
Note: Tag could be anything(not fixed)
I want regex expression to replace the same in the javascript.
You should be able to strip out the \n character before applying this HTML to the page.
Having said that, try this (\\n)
You can see it here: regex101
Edit: A bit of refinement and I have this (\W\\n). It works with the example you provided. It breaks down if you have spaces in the body of the tags (<span> \n </span>).
I've tried everything I know to do. Perhaps someone with more regex experience can assist?
I am using String.fromCharCode to add new line (or) carriage return to my html text.
It is like,
"Ant the other line here..." + String.fromCharCode(13)
Jsfiddle is #http://jsfiddle.net/udmfsvfn/
But, no newline characters are added in the page!!
If you want a line break in HTML you need to supply <br> entity instead of a line break (your String.fromCharCode(13) code) since HTML interprets line breaks as usual spaces in text.
The reason that a newline character is not forcing a new line, is that in HTML a newline character doesnt do anything and is ignored.
In order to force text onto a new line, you will need to add the appropriate HTML tag, such as <BR> or put your text inside paragraphs <p>.
See the updated fiddle.
String.fromCharCode(10);
with CSS
white-space: pre-line;
Here si working example:
https://jsfiddle.net/Nxja/3xtcqdej/1/
I know there are other questions on editable divs, but I couldn't find one specific to the Markdown-related issue I have.
User will be typing inside a ContentEditable div. And he may choose to do any number of Markdown-related things like code blocks, headers, and whatever.
I am having issues extracting the source properly and storing it into my database to be displayed again later by a standard Markdown parser. I have tried two ways:
$('.content').text()
In this method, the problem is that all the line breaks are stripped out and of course that is not okay.
$('.content').html()
In this method, I can get the line breaks working fine by using regex to replace <br\> with \n before inserting into database. But the browser also wraps things like ## Heading Here with divs, like this: <div>## Heading Here</div>. This is problematic for me because when I go to display this afterwards, I don't get the proper Markdown formatting.
What's the best (most simple and reliable) way to solve this problem as of 2015?
EDIT: Found a potential solution here: http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/
if you check the documentation of jquery's .text() method,
The result of the .text() method is a string containing the combined text of all matched elements. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)
so getting whitespaces is not guaranteed in all browsers.
try using the innerText property of the element.
document.getElementsByClassName('content')[0].innerText
this returns the text with all white spacing intact. But this is not cross browser compatible. It works in IE and Chrome, but not in Firefox.
the innerText equivalent for Firefox is textContent (link), but that strips out the whitespaces.
This is what I've been able to come up with using that link I posted above in my edit. It's in Coffeescript.
div = $('.content')[0]
if div.innerText
text = div.innerText
else
escapedText = div.innerHTML
.replace(/(?:\r\<br\>|\r|\<br\>)/g, '\n')
.replace(/(\<([^\>]+)\>)/gi, "")
text = _.unescape(escapedText)
Basically, I'm checking whether or not innerText works, and if it doesn't then we do this other thing where we:
Take the HTML, which has escaped text.
Replace all the <br> tags with line breaks.
Strip out any tags (escaped ones won't be stripped, i.e. the stuff the user types).
Unescape the escaped text.
I am trying to get value of a textarea with line break. When I debug, the value is this way in jquery. the value stored in a variable like this:
"test<br>
test<br>
test"<br>
In .value of valueOf is: 'test↵test↵test'.
I wonder how can I convert it to \n in order to insert line break.. I'm using jquery to get the value and send by ajax to php!
thanks.. :)
Sorry my english..
Try this
val=document.getElementById('recommend').value;
val = val.replace(/<br\s*\/?>/mg,"\n");
Fiddle http://jsfiddle.net/eSub4/1/
I have put a couple of console.log in fiddle to show you how new line(\n) and html line break show up in console and compare it with the text from textarea to see that you are getting new line (\n) for text in textarea after using the regex. Keep firebug open to see the output
try
document.getElementById('textareaid').innerHTML;
you need to replace 'textareaid' with the actual id.
since you say you already have the data in a string, but its not formatted right, to turn the <br> into newlines, you can use this
textString=textString.replace(/<br>/g,"\n");
It works for me....
$("#id").val("<?php echo str_replace(array("\r\n","\r","\n","\\r","\\n","\\r\\n"),"<br>",$value); ?>".replace(/<br\s*[\/]?>/gi, "\n"));