CODEWITHSUNDEEP
javascripthtmltextarea
David Wolever
David Wolever

Reputation: 154594

HTML textarea: use JavaScript to get wrapped text?

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 – "a b c\nd e f" (which, because of wrap=hard, is the text that would be sent if the <textarea… was submitted in a <form…).

Upvotes: 3

Views: 6935

Answers (6)

wrwrwr
wrwrwr

Reputation: 1066

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).

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

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();

Upvotes: 1

Jeffrey Blake
Jeffrey Blake

Reputation: 9709

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.

Upvotes: 1

Cerin
Cerin

Reputation: 64800

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>

Upvotes: 2

Ty W
Ty W

Reputation: 6814

It's a bit of a hack, but you could create a script on the server that prints out whatever is posted to it in some format (JSON, plain text, whatever suits you) and post your textarea to that script via AJAX whenever you need to get the contents of it.

Upvotes: 0

RaYell
RaYell

Reputation: 70434

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).

Upvotes: 0

Related Questions