HTML textarea: use JavaScript to get wrapped text?
Question
If I've got a textarea like this:
<textarea id="foo" cols=80 wrap="hard"></textarea>
Is there any way, using JavaScript, to grab the hard-wrapped text?
I've tried the obvious $("#foo").val() , but that returns the unwrapped text.
For example, if the textarea is:
<textarea id="bar" cols=5 wrap="hard">a b c d e f</textarea>
The browser will wrap the text to:
a b c
d e f
And I was some way to grab that text – "abc\\nd ef" (which, because of wrap=hard , is the text that would be sent if the <textarea… was submitted in a <form… ).
6 answers
solution1
2 2010-01-26 21:34:55
Since the formatting is done by the browser on submit, your best bet will be to have the browser submit, but to a location of your choice such as an iframe where you can extract the formatted text from the form or url parameters.
<html><body>
<script type="text/javascript">
function getURLParameter(qs, name)
{
var pattern = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( pattern );
var res = regex.exec( qs );
if (res == null)
return "";
else
return res[1];
}
function getHardWrappedText(){
if (top.location.href !== window.location.href) return;
var frm_url = document.getElementById('ifrm').contentDocument.URL;
if (frm_url.indexOf('http') < 0) return;
var text = unescape(getURLParameter(document.getElementById('ifrm').contentDocument.URL, 'bar')).replace(/\+/g,' ');
alert(text)
}
</script>
<form name="main" method="get" target="ifrm">
<textarea id="bar" name="bar" cols=5 wrap="hard">a b c d e f</textarea>
<input type="submit">
</form>
<iframe id="ifrm" name="ifrm" onload="getHardWrappedText();" style="display:none;"></iframe>
</body></html>
solution2
1 2010-01-26 16:20:37
Edit 2
The only solution that i can propose is to create a hidden iframe with a name, and target the form submit to that frame. Then the iframe can communicate with its parent throught the window.parent and provide the returned text (which will include the new lines as the form has been normally submitted..)
of course the submit could be called by a script if you wished ..
the following i have strike-through since it does not apply to this case..
a generic way to do this would be
alert( $('<div/>').append($('#foo').clone()).html() );
what this does is
Create a new div (in memory)
$('<div/>')
clone the desired element
#foo and append it to the div we created
.append( $('#foo').clone() )
extract the inner html (but since we are dealing with the div that we wrapped around our element, we get the elements html ..
.html()
[EDIT]
obviously i misunderstood .. to get the inside text of an element use the .text() method so
$('#foo').text();
solution3
1 2010-01-27 02:58:49
I'm assuming that you know the dimensions of the text area (if not, you can probably just get them from the DOM).
Use this to split the string. Go to the xth char (in your example the 5th), and see if the next char is a space. If so (or if there are no spaces in the preceding segment), this is where you split. Otherwise, you find the preceding space and split there.
Wrap this in a function and you could add in some recursion to find the nth line.
solution4
0 2010-01-26 16:05:09
I don't think it's possible out of the box You could wrap the text yourself using textarea's cols value. From the HTML point of view the text in textarea is not wrapped. It's just how it's being displayed for you to be able to read it better.
PS. If you are using jQuery you should use $('#foo') instead of $('[id=foo]') selector as it's much faster (and shorter).
solution5
0 2010-01-26 16:53:52
这有点麻烦，但是您可以在服务器上创建一个脚本，该脚本以某种格式（JSON、纯文本、任何适合您的格式）打印出发布到它的任何内容，并在您需要时通过 AJAX 将您的 textarea 发布到该脚本得到它的内容。
solution6
0 2021-01-07 23:03:32
With modern browsers the wrapped text can be found in FormData :
new FormData(document.querySelector('form')).get('name')
This appears to match what is submitted (the wrapping as shown or the unwrapped value ).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.