Community
    • Login

    CSS not working when I add it to multiple files using the Regular expression mode

    Scheduled Pinned Locked Moved Help wanted · · · – – – · · ·
    21 Posts 3 Posters 763 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Alan KilbornA
      Alan Kilborn @dr ramaanand
      last edited by

      @dr-ramaanand said in CSS not working when I add it to multiple files using the Regular expression mode:

      the brackets were missing

      Probably if you had called them by their correct name – parentheses – I wouldn’t have been so unsure of your problem statement.

      But really, providing more info up front would have been a good idea. I had to do a lot of supposition to provide my first answer – at least it was good supposition. :-)

      dr ramaanandD 1 Reply Last reply Reply Quote 0
      • dr ramaanandD
        dr ramaanand @Alan Kilborn
        last edited by

        @Alan-Kilborn I believe you were able to guess what the problem is because you have been working on these RegExes for years. Thanks again!

        1 Reply Last reply Reply Quote 0
        • guy038G
          guy038
          last edited by guy038

          Hello, @dr-ramaanand, @alan-kilborn and All,

          PLEASE, just skip this post, which is erroneous, and see my next one, below !

          Ah…, of course, you cannot do it that way because when you try to insert a multi-line text into the Replace zone of the Replace, Find in Files or Find in Projects tab, you just get the very first line of your text

          First, I verified, from this link https://www.w3schools.com/html/html_css.asp, that the internal multi-lines CSS section ( <style>...........</style> ) is generally located, right before the HTML </head> tag

          So, I supposed that you want to insert the CSS part, below :

          <style>
          .container {
              display: flex;
          }
          .container > div {}
          }
          @media (max-width: 480px) {
          .left {
            width: 150px;
            border-width:1px;
            border-style:solid;
            border-color:lightblue;
            padding-top:10px;
          }
          .right {
            width: 140px;
            border-top:1px solid lightblue;
          }
          }
          </style>
          

          Right before the </head> tag of some of your HTML files, don’t you ?


          If so, here is the correct way to insert this multi-lines text !

          • Copy all your CSS section in a new tab

          • Verify that the last line </style> is followed with a line-break

          • Open the Replace dialog ( Ctrl + H )

            • Uncheck all box options

            • SEARCH \R

            • REPLACE \\r\\n

            • Check the Wrap around option

            • Select the Regular expression search mode

            • Click on the Replace All button

          You should get this text :

          <style>\r\n.container {\r\n    display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media (max-width: 480px) {\r\n.left {\r\n  width: 150px;\r\n  border-width:1px;\r\n  border-style:solid;\r\n  border-color:lightblue;\r\n  padding-top:10px;\r\n}\r\n.right {\r\n  width: 140px;\r\n  border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n
          

          Now, in order to test my method :

          • Copy this tiny HTML text, below, in an other new tab
          <!DOCTYPE html>
          <html>
          <head>
          </head>
          <body>
          
          <h1>This is a heading</h1>
          <p>This is a paragraph.</p>
          
          </body>
          </html>
          
          • Re-open the Replace dialog ( Ctrl + H )

            • Uncheck all box options

            • SEARCH (?=</head>)

            • REPLACE <style>\r\n.container {\r\n display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media (max-width: 480px) {\r\n.left {\r\n width: 150px;\r\n border-width:1px;\r\n border-style:solid;\r\n border-color:lightblue;\r\n padding-top:10px;\r\n}\r\n.right {\r\n width: 140px;\r\n border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n

            • Check the Wrap around option

            • Select the Regular expression search mode

            • Click on the Replace All button

          You should be left with your expected OUTPUT text :

          <!DOCTYPE html>
          <html>
          <head>
          <style>
          .container {
              display: flex;
          }
          .container > div {}
          }
          @media max-width: 480px {
          .left {
            width: 150px;
            border-width:1px;
            border-style:solid;
            border-color:lightblue;
            padding-top:10px;
          }
          .right {
            width: 140px;
            border-top:1px solid lightblue;
          }
          }
          </style>
          </head>
          <body>
          
          <h1>This is a heading</h1>
          <p>This is a paragraph.</p>
          
          </body>
          </html>
          

          Voila ;-))


          IMPORTANT : Note that the method to change any multi-lines text ( with search = \R and replacement = \\r\\n ) is not specific to your HTML case.

          It will, indeed, allow you to fill in the resulting multi-lines text into the Replace with : zone, which will be inserted at the exact location defined in the Find what : zone !!

          Best Regards,

          guy038

          1 Reply Last reply Reply Quote 0
          • guy038G
            guy038
            last edited by

            Hi, @dr-ramaanand, @alan-kilborn and All,

            I’ve just seen that I did a mistake regarding the syntax of the parentheses in the Replacement zone. Give me some minutes and I’ll post the correct solution !

            BR

            guy038

            dr ramaanandD 1 Reply Last reply Reply Quote 0
            • dr ramaanandD
              dr ramaanand @guy038
              last edited by

              @guy038 I had done exactly as you typed above and the parentheses did not get replicated where it had to be reproduced. The solution given by @Alan-Kilborn has now helped me fix it. Thanks anyway!

              dr ramaanandD 1 Reply Last reply Reply Quote 0
              • dr ramaanandD
                dr ramaanand @dr ramaanand
                last edited by dr ramaanand

                I see that this page is showing up in the search results of the search engines like Google and msn, so for the benefit of those landing on this webpage, let me tell you that I did as @guy038 typed above, then, I replaced @media max-width: 480px with @media max-width: \(480px\) with the Regular expression mode and got this result: @media max-width: (480px) which is what I wanted.

                1 Reply Last reply Reply Quote 0
                • guy038G
                  guy038
                  last edited by guy038

                  Hello, @dr-ramaanand, @alan-kilborn and All,

                  Yes, @dr-ramaanand, you’re right : we have to escape the parentheses, but also to escape the escape character, too, if it occurs as a literal !!

                  Thus, this is an UPDATED version of my previous post !

                  Ah…, of course, you cannot do it that way because when you try to insert a multi-line text into the Replace zone of the Replace, Find in Files or Find in Projects tab, you just get the very first line of your text

                  First, I verified, from this link https://www.w3schools.com/html/html_css.asp, that the internal multi-lines CSS section ( <style>...........</style> ) is generally located, right before the HTML </head> tag

                  So, I supposed that you want to insert the CSS part, below :

                  <style>
                  .container {
                      display: flex;
                  }
                  .container > div {}
                  }
                  @media (max-width: 480px) {
                  .left {
                    width: 150px;
                    border-width:1px;
                    border-style:solid;
                    border-color:lightblue;
                    padding-top:10px;
                  }
                  .right {
                    width: 140px;
                    border-top:1px solid lightblue;
                  }
                  }
                  </style>
                  

                  Right before the </head> tag of some of your HTML files, don’t you ?


                  If so, here is the correct way to insert a multi-lines text !

                  • Copy all your CSS section in a new tab

                  • Verify that the last line </style> is followed with a line-break

                  • Open the Replace dialog ( Ctrl + H )

                    • Uncheck all box options

                    • SEARCH ([()\\])|\R

                    • REPLACE ?1\\\1:\\r\\n

                    • Check the Wrap around option

                    • Select the Regular expression search mode

                    • Click on the Replace All button

                  You should get this text :

                  <style>\r\n.container {\r\n    display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media \(max-width: 480px\) {\r\n.left {\r\n  width: 150px;\r\n  border-width:1px;\r\n  border-style:solid;\r\n  border-color:lightblue;\r\n  padding-top:10px;\r\n}\r\n.right {\r\n  width: 140px;\r\n  border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n
                  

                  Now, in order to test my method :

                  • Copy this tiny HTML text, below, in an other new tab
                  <!DOCTYPE html>
                  <html>
                  <head>
                  </head>
                  <body>
                  
                  <h1>This is a heading</h1>
                  <p>This is a paragraph.</p>
                  
                  </body>
                  </html>
                  
                  • Re-open the Replace dialog ( Ctrl + H )

                    • Uncheck all box options

                    • SEARCH (?-i)(?=</head>)

                    • REPLACE <style>\r\n.container {\r\n display: flex;\r\n}\r\n.container > div {}\r\n}\r\n@media \(max-width: 480px\) {\r\n.left {\r\n width: 150px;\r\n border-width:1px;\r\n border-style:solid;\r\n border-color:lightblue;\r\n padding-top:10px;\r\n}\r\n.right {\r\n width: 140px;\r\n border-top:1px solid lightblue;\r\n}\r\n}\r\n</style>\r\n

                    • Check the Wrap around option

                    • Select the Regular expression search mode

                    • Click on the Replace All button

                  You should be left with your expected OUTPUT text :

                  <!DOCTYPE html>
                  <html>
                  <head>
                  <style>
                  .container {
                      display: flex;
                  }
                  .container > div {}
                  }
                  @media (max-width: 480px) {
                  .left {
                    width: 150px;
                    border-width:1px;
                    border-style:solid;
                    border-color:lightblue;
                    padding-top:10px;
                  }
                  .right {
                    width: 140px;
                    border-top:1px solid lightblue;
                  }
                  }
                  </style>
                  </head>
                  <body>
                  
                  <h1>This is a heading</h1>
                  <p>This is a paragraph.</p>
                  
                  </body>
                  </html>
                  

                  Voila ;-))


                  IMPORTANT : Note that the method to change any multi-lines text ( with search = ([()\\])|\R and replacement = ?1\\\1:\\r\\n ) is not specific to your HTML case.

                  It will, indeed, allow you to fill in the resulting multi-lines text into the Replace with : zone, which will be inserted, identically, at the exact location defined in the Find what : zone !!

                  Best Regards,

                  guy038

                  dr ramaanandD Alan KilbornA 2 Replies Last reply Reply Quote 1
                  • dr ramaanandD
                    dr ramaanand @guy038
                    last edited by

                    @guy038 merci beaucoup!

                    1 Reply Last reply Reply Quote 1
                    • Alan KilbornA
                      Alan Kilborn @guy038
                      last edited by

                      @guy038

                      It seems like your solution is a long route when the OP was looking for a short route.

                      Much shorter is what I guessed at and seemingly what the OP was already doing:

                      • select the replacement text in the editor
                      • press Ctrl+f
                      • swap Find what and Replace with (using the button)
                      • overwrite Find what
                      • “escape” any ( or ) characters in Replace with
                      • execute Replace in Files
                      1 Reply Last reply Reply Quote 1
                      • guy038G
                        guy038
                        last edited by guy038

                        Hello, @alan-kilborn and All,

                        Alan, I grant you : your idea is more direct and simpler than mine ;-))


                        However, let’s suppose that an OP is working on a Lisp program and that he wants to insert this Lisp module which converts any roman number into its decimal equivalent number

                        For instance, in Lisp, with the program below and the question (trad 'MCMXCV), it would return 1995 ( I do not know this language and I just suppose that it’s true ! )

                        (de trad (Z) (cond  ;                \* ROMAN number -> DECIMAL number *\
                        					(( eq Z 'I) 1)
                        					(( eq Z 'V) 5)
                        					(( eq Z 'X) 10)
                        					(( eq Z 'L) 50)
                        					(( eq Z 'C) 100)
                        					(( eq Z 'D) 500)
                        					(( eq Z 'M) 1000)
                        					((atom Z) (trad (explodech Z)))
                        					((null (cdr Z)) (trad (car Z)))
                        					((< (trad (car Z)) (trad (cadr Z)))
                        					(- (trad (cdr Z)) (trad (car Z))))
                        					(t (+ (trad (car Z)) (trad (cdr Z)) )) ))
                        

                        No doubt that using my mehtod will be safer !!

                        Note that I included a LISP comment, which begins with a semi-colon, adding a comment with a C-like syntax in order to place anti-slashes in my example !

                        After aplying the regex S/R :

                        • SEARCH ([()\\])|\R

                        • REPLACE ?1\\\1:\\r\\n

                        against this List module, you would get the text below, which could be correctly inserted, as it, in a larger Lisp program !

                        \(de trad \(Z\) \(cond  ;                \\* ROMAN number -> DECIMAL number *\\\r\n					\(\( eq Z 'I\) 1\)\r\n					\(\( eq Z 'V\) 5\)\r\n					\(\( eq Z 'X\) 10\)\r\n					\(\( eq Z 'L\) 50\)\r\n					\(\( eq Z 'C\) 100\)\r\n					\(\( eq Z 'D\) 500\)\r\n					\(\( eq Z 'M\) 1000\)\r\n					\(\(atom Z\) \(trad \(explodech Z\)\)\)\r\n					\(\(null \(cdr Z\)\) \(trad \(car Z\)\)\)\r\n					\(\(< \(trad \(car Z\)\) \(trad \(cadr Z\)\)\)\r\n					\(- \(trad \(cdr Z\)\) \(trad \(car Z\)\)\)\)\r\n					\(t \(+ \(trad \(car Z\)\) \(trad \(cdr Z\)\) \)\) \)\)\r\n
                        

                        Best Regards,

                        guy038

                        Well, this example is a bit “far-fetched”, but, as I knew that the Lisp language abuses parentheses, I couldn’t resist ! LOL

                        Alan KilbornA dr ramaanandD 2 Replies Last reply Reply Quote 0
                        • Alan KilbornA
                          Alan Kilborn @guy038
                          last edited by

                          @guy038 said in CSS not working when I add it to multiple files using the Regular expression mode:

                          No doubt that using my method will be safer !!

                          Understood.
                          I was just trying to help OP by sticking with his exact problem.
                          It’s fine to present more complicated situations in follow-on discussions, as you did.

                          1 Reply Last reply Reply Quote 0
                          • dr ramaanandD
                            dr ramaanand @guy038
                            last edited by

                            @guy038 The gist of the matter is that parentheses, that is rounded, simple brackets have to be escaped with a backslash like \( and \) or else they will be skipped during any replacement

                            Alan KilbornA dr ramaanandD 2 Replies Last reply Reply Quote 0
                            • Alan KilbornA
                              Alan Kilborn @dr ramaanand
                              last edited by

                              @dr-ramaanand said in CSS not working when I add it to multiple files using the Regular expression mode:

                              The gist of the matter is that parentheses…

                              Perhaps equally important for possible future readers of this topic is showing a technique to get multiline text into the Replace with box! :-)

                              dr ramaanandD 1 Reply Last reply Reply Quote 1
                              • dr ramaanandD
                                dr ramaanand @dr ramaanand
                                last edited by dr ramaanand

                                For those who’ve searched online and come here, let me tell you that I had already made the mistake of not escaping the parentheses, just as @guy038 gave as a solution first which was faulty as it skipped adding the parentheses. I had ended up with @media max-width: 480px {. However, you need not fret if you have made the same mistake, just put @media max-width: 480px in the Find field, select the Regular expression mode, put @media \(max-width: 480px\) and hit the Replace in files button and you will end up with the correct result which is @media (max-width: 480px) {

                                1 Reply Last reply Reply Quote 0
                                • dr ramaanandD
                                  dr ramaanand @Alan Kilborn
                                  last edited by

                                  @Alan-Kilborn said in CSS not working when I add it to multiple files using the Regular expression mode:

                                  Perhaps equally important for possible future readers of this topic is showing a technique to get multiline text into the Replace with box! :-)

                                  Yes, for multiple lines to be added, we have to put Line1\r\nLine2\r\nLine3\r\nLine4 in the Replace in files field to get one line below the other.

                                  Alan KilbornA 1 Reply Last reply Reply Quote 1
                                  • Alan KilbornA
                                    Alan Kilborn @dr ramaanand
                                    last edited by

                                    @dr-ramaanand said:

                                    for multiple lines to be added, we have to put Line1\r\nLine2\r\nLine3\r\nLine4

                                    OK, so now any possible benefit of the original technique is probably lost to future readers. :-(

                                    1 Reply Last reply Reply Quote 0
                                    • guy038G
                                      guy038
                                      last edited by guy038

                                      Hello, @dr-ramaanand and All,

                                      See also the last part of this post which exposed a simple solution when you just want to insert a multi-lines text, even in multiple locations, of the curent file, only :

                                      https://community.notepad-plus-plus.org/post/98543

                                      Best Regards

                                      guy038

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post
                                      The Community of users of the Notepad++ text editor.
                                      Powered by NodeBB | Contributors