Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts

    parsing line breaks

    This is proablly more simple then what I've been able to find so I come "home" to ask a question.

    I'm making a vaery specialized form to output html code to copy and paste. So far so good and I'm happy with the out come. I know it's a tad bloated but I actually wrote a little bit of it from what I've learned so I'm learning and that's the point.

    So what happens is that I present my user with a form where they can slap in all the info and the out come is a copy and paste procedure after that.

    In the "content" section, I'm sure there will be a few paragraphs of text being entered sometime, and most likely copied and pasted in. What I would like to happen is the script recognize carrige returns and enter in <br><br> in place of them. This is a wordpress issue so im not sure if closing a p and opening one is going to work right.

    anyways here's what i have working:

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>|</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <script LANGUAGE="JavaScript" type="text/javascript">
    function display() {
      DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=auto,height=auto,overflow=auto')
    
    if (document.form1.head1.value !=0){
    var head1 = "&lt;h4&gt;" + document.form1.head1.value + "&lt;/h4&gt;" + "<br>";
    }
    else {
    var head1 = "";
    }
    if (document.form1.date.value !=0){
    var date = "&lt;li&gt;" + "&lt;b&gt;Date: &lt;/b&gt;" + document.form1.date.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var date = "";
    }
    if (document.form1.time.value !=0){
    var time = "&lt;li&gt;" + "&lt;b&gt;Time: &lt;/b&gt;" + document.form1.time.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var time = "";
    }
    if (document.form1.cost.value !=0){
    var cost = "&lt;li&gt;" + "&lt;b&gt;Cost: &lt;/b&gt;" + document.form1.cost.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var cost = "";
    }
    if (document.form1.format.value !=0){
    var format = "&lt;li&gt;" + "&lt;b&gt;Format: &lt;/b&gt;" + document.form1.format.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var format = "";
    }
    if (document.form1.prizes.value !=0){
    var prizes = "&lt;li&gt;" + "&lt;b&gt;Prizes: &lt;/b&gt;" + document.form1.prizes.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var prizes = "";
    }
    if (document.form1.content.value !=0){
    var content = "&lt;p&gt;" + document.form1.content.value + "&lt;/p&gt;" + "<br>";
    }
    else {
    var content = "";
    }
    if (document.form1.date.value !=0 || document.form1.time.value !=0 || document.form1.cost.value !=0 || document.form1.format.value !=0 || document.form1.prizes.value !=0){
    var ulo = "&lt;ul&gt;" + "<br>"
    var ulc = "&lt;/ul&gt;" + "<br>";
    }
    else {
    var ulo = ""
    var ulc = "";
    }
    
    
    DispWin.document.write(head1 + ulo + date + time + cost + format + prizes + ulc + content);
    }
    </script>
    <style type="text/css">
    form, input, textarea {
    font: 600 .8em tahoma, verdana, sans-serif;
    color: #000;
    padding: 4px;
    width: 252px;
    }
    input, textarea {
    font-size: 100%;
    }
    textarea, input {
    background: #A4D6EF;
    border: 2px solid #182B4F;
    width: 240px;
    margin: 0 0 8px 0;
    }
    .sub {
    cursor: hand;
    width: 100px;
    float: left;
    font: 600 .8em tahoma, verdana, sans-serif;
    }
    .sub1 {
    cursor: hand;
    width: 100px;
    float: right;
    font: 600 .8em tahoma, verdana, sans-serif;
    }
    form *:hover, form *:focus {
    background: #9d3;
    }
    .sub:focus, .sub1:focus {
    background: #A4D6EF;
    }
    textarea {
    height: 300px;
    }
    </style>
    
    </head>
    <body>
    <form name="form1" action="">
    Post Title:<br>
    <input type="text" name="head1"><br>
    Date:<br>
    <input type="text" name="date"><br>
    Time:<br>
    <input type="text" name="time"><br>
    Cost:<br>
    <input type="text" name="cost"><br>
    Format:<br>
    <input type="text" name="format"><br>
    Prizes:<br>
    <input type="text" name="prizes"><br>
    Content:<br>
    <textarea name="content"></textarea><br>
    <input type="submit" value="View Data" class="sub" onClick="display();"><input type="reset" value="Clear Fields" class="sub1"><br>
    </form>
    </body>
    </html>
    you type in the fields and it spits out nice code to copy and paste. Again what I want to do now is make the "content" area parse line breaks rather than having to make multiple textareas.

    cheers
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not positive I understand what you are looking for, but here is an attempt. About line 46 you have an if statement for the value of the content textarea. Perhaps change it like this?

    Code:
    if (document.form1.content.value !=0){
      var s = document.form1.content.value;
      s = s.replace(/\n/gm, "<br/><br/>");
      var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
    }
    else {
      var content = "";
    }
    david_kw

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    actually david, you hit it right on prety much. I changed it to:

    Code:
    if (document.form1.content.value !=0){
      var s = document.form1.content.value;
      s = s.replace(/\n/gm, "&lt;br&gt;&lt;br&gt;");
      var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
    }
    else {
      var content = "";
    }
    produces an output like:

    Code:
    <p>one line<br><br>two line<br><br>three line<br><br>four line</p>
    which works perfect for what I need it to do.

    basically if i didnt make my self very clear was that im making a form that you can fil in the blanks and it will output html styled code to copy and paste into a CMS adn it will parse it correctley.

    I had previously built a template that they could use for the formatting due to the css, but over the years they have butchered it and things have gone awry. with a form they can just input the info and the form will give them them consistency in the posts.

    I looked around a while trying o figure out out differt parsings and
    Code:
    /\n/gm,
    was what I was missing a real example of.

    the thing is now:

    if i copy and paste:
    Code:
    basically if i didnt make my self very clear was that im making a form that you can fil in the blanks and it will output html styled code to copy and paste into a CMS adn it will parse it correctley.
    
    I had previously built a template that they could use for the formatting due to the css, but over the years they have butchered it and things have gone awry. with a form they can just input the info and the form will give them them consistency in the posts.
    into the comments section, it puts 4 <br> tags in there. My ulmitimate goal is to make a copy and paste like that an a carrige return act like <br><br> .
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then use only one <br> instead.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You sould also take in account that <br> = \r\n

    Most text end it's line with carrige return AND new line.
    Last edited by tonyp12; 02-01-2007 at 07:56 AM.

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Honestly I'm still not sure I know what you want but here is another take where there is an html representation of a line break when a \n is in the test as well as an actual line break.

    Code:
    if (document.form1.content.value !=0){
    var s = document.form1.content.value;
    s = s.replace(/\n/gm, "&lt;br/&gt;<br/>");
    var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
    }
    else {
    var content = "";
    }
    I'd think this would allow a copy and paste better for what the html should be. As was mentioned by the other posters, you probably only want one line break for each line feed (\n). The carriage return (\r) you can probably ignore since html will filter it out anyway.

    Plus the code puts an actual <br/> in that shows visually in the browser that the line break is there. I still feel like I'm guessing though. :) Regardless, hopefully it helps you towards what you need.

    david_kw

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.
    Code:
    str=str.replace(/\u000d[\u000a\u0085]|[\u0085\u2028\u000d\u000a]/g,'\n');
    After that, you can
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #9
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You really can't ignore the \r\n stuff. IE uses \r\n while other browsers use \n.
    I'm not sure why not in this situation. The HTML display ignores excess white space and treats it as " ". And both systems use the \n. So if you have

    var s = "Before line break\r\nAfter";
    s = s.replace(/\n/gm, "<br/>");
    such that s is "Before line break\r<br/>After"

    or

    var s = "Before line break\nAfter";
    s = s.replace(/\n/gm, "<br/>");
    such that s is "Before line break<br/>After"

    in either case it will show

    Before line break
    After
    So I guess I don't understand. Considering the situation, why do you feel the \r can't be ignored?

    david_kw

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Why not put the whole text inside the <pre></pre> tags so that all the whitespaces are preserved and you don't have to replace linebreaks with <br />?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Man, thanks for the discussion and the help.

    david, I used your second solution and it appers that it does exactly what I need it to do. I havent been able to break it yet. Many thanks.

    glenn, I thought at first, that the pre tag would be perfect, but after tryign it out I realized that it wasn't the way to go. the out put is going on a liquid layout site adn a real wide block of text is going to destroy it if in a pre tag.

    so this is the code I'm using so far if anyone wants to play with it.


    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <title>|</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <script LANGUAGE="JavaScript" type="text/javascript">
    function display() {
      DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=auto,height=auto,overflow=auto,scrollbars=yes,resizable=yes')
    
    if (document.form1.head1.value !=0){
    var head1 = "&lt;h4&gt;" + document.form1.head1.value + "&lt;/h4&gt;" + "<br>";
    }
    else {
    var head1 = "";
    }
    if (document.form1.titleradio.checked){
    var head1 = "&lt;h4&gt;" + "&lt;a href=&quot;" + document.form1.headlink.value +"&quot;&gt;" + document.form1.head1.value + "&lt;/a&gt;" + "&lt;/h4&gt;"  + "<br>";
    }
    else {
    var nada = "";
    }
    if (document.form1.pic.value !=0){
    var pic = "&lt;img src=&quot;" + document.form1.pic.value + "&quot;&gt;" + "<br>";
    }
    else {
    var pic = "";
    }
    if (document.form1.piclink.checked){
    var pic = "&lt;a href=&quot;" + document.form1.picaddy.value + "&quot;&gt;" + "&lt;img src=&quot;" + "imagedump/" + document.form1.pic.value + "&quot;&gt;" + "&lt;/a&gt;" + "<br>";
    }
    else {
    var nada = "";
    }
    if (document.form1.date.value !=0){
    var date = "&lt;li&gt;" + "&lt;b&gt;Date: &lt;/b&gt;" + document.form1.date.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var date = "";
    }
    if (document.form1.time.value !=0){
    var time = "&lt;li&gt;" + "&lt;b&gt;Time: &lt;/b&gt;" + document.form1.time.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var time = "";
    }
    if (document.form1.cost.value !=0){
    var cost = "&lt;li&gt;" + "&lt;b&gt;Cost: &lt;/b&gt;" + document.form1.cost.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var cost = "";
    }
    if (document.form1.format.value !=0){
    var format = "&lt;li&gt;" + "&lt;b&gt;Format: &lt;/b&gt;" + document.form1.format.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var format = "";
    }
    if (document.form1.prizes.value !=0){
    var prizes = "&lt;li&gt;" + "&lt;b&gt;Prizes: &lt;/b&gt;" + document.form1.prizes.value + "&lt;/li&gt;" + "<br>";
    }
    else {
    var prizes = "";
    }
    
    
    if (document.form1.content.value !=0){
    var s = document.form1.content.value;
    s = s.replace(/\n/gm, "&lt;br/&gt;<br/>");
    var content = "&lt;p&gt;" + s + "&lt;/p&gt;" + "<br>";
    }
    else {
    var content = "";
    }
    
    
    if (document.form1.date.value !=0 || document.form1.time.value !=0 || document.form1.cost.value !=0 || document.form1.format.value !=0 || document.form1.prizes.value !=0){
    var ulo = "&lt;ul&gt;" + "<br>"
    var ulc = "&lt;/ul&gt;" + "<br>";
    }
    else {
    var ulo = ""
    var ulc = "";
    }
    
    
    DispWin.document.write(head1 + ulo + date + time + cost + format + prizes + ulc + content);
    }
    
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'none')
    e.style.display = 'block';
    else
    e.style.display = 'none';
    }
    
    </script>
    <style type="text/css">
    form, input, textarea {
    font: 600 .8em tahoma, verdana, sans-serif;
    color: #000;
    padding: 4px;
    width: 252px;
    }
    i {
    font: 600 italic .7em tahoma, verdana, sans-serif;
    }
    input, textarea {
    font-size: 100%;
    }
    textarea, input {
    background: #A4D6EF;
    border: 2px solid #182B4F;
    width: 240px;
    margin: 0 0 8px 0;
    }
    .check {
    width: 20px;
    height: 20px;
    border-color: #fff;
    background: #fff;
    float: left;
    }
    .sub {
    cursor: hand;
    width: 100px;
    float: left;
    font: 600 .8em tahoma, verdana, sans-serif;
    }
    .sub1 {
    cursor: hand;
    width: 100px;
    float: right;
    font: 600 .8em tahoma, verdana, sans-serif;
    }
    textarea {
    height: 250px;
    }
    .fl {
    float: left;
    width: 25%;
    }
    br {
    clear: left;
    }
    </style>
    
    </head>
    <body>
    <form name="form1" action="">
    Post Title:<br>
    <input type="text" name="head1"><br>
    Is the title a link?<br>
    <span class="fl"><input type="radio" onclick="toggle_visibility('h4link');" class="check"  name="titleradio">Yes</span>
    <br>
    <div id="h4link" style="display: none;">
    Heading Link:<br>
    <i>http://www.example.com</i><br>
    <input name="headlink">
    </div>
    Post Image:<br>
    <i>whatever.jpg (.gif, .jpg, .bmp, etc...)</i><br>
    <input type="text" name="pic"><br>
    Is the image a link?<br>
    <span class="fl"><input type="radio" onclick="toggle_visibility('picboxlink');" class="check"  name="piclink">Yes</span>
    <br>
    <div id="picboxlink" style="display: none;">
    Image Link:<br>
    <i>http://www.example.com</i><br>
    <input name="picaddy">
    </div>
    
    Date:<br>
    <input type="text" name="date"><br>
    Time:<br>
    <input type="text" name="time"><br>
    Cost:<br>
    <input type="text" name="cost"><br>
    Format:<br>
    <input type="text" name="format"><br>
    Prizes:<br>
    <input type="text" name="prizes"><br>
    Content:<br>
    <textarea name="content"></textarea><br>
    <input type="submit" value="View Data" class="sub" onClick="display(), history.go(0);"><input type="reset" value="Clear Fields" class="sub1"><br>
    </form>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •