I want to remove the newline before the </script> in my HTML file with a Linux command (sed, awk...).
Sample input:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Ders 2</title>
<script type="text/javascript" src="script1.js" language="javascript">
</script>
<script type="text/javascript" src="script2.js" language="javascript">
</script>
<script>
// script kodumuz buraya yazılacak
</script>
</head>
<body>
<script type="text/javascript" src="script3.js" language="javascript">
</script>
</body>
</html>
Sample output:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Ders 2</title>
<script type="text/javascript" src="script1.js" language="javascript"> </script>
<script type="text/javascript" src="script2.js" language="javascript"> </script>
<script>
// script kodumuz buraya yazılacak</script>
</head>
<body>
<script type="text/javascript" src="script3.js" language="javascript"> </script>
</body>
</html>
I tried different syntax, but none of them could do.
First of all, as mentioned in the comments Don't parse XML with Regex! Never do it, never think about it. Make it a habit not to think about it! Sometimes it might look to be a simple task that can be performed with sed or awk or any other regex parser, but no ...
What you can do, on the other hand—if you really want to use sed or awk — processes the file first with xmlstarlet and convert it into a PYX format.
The PYX format is a line-oriented representation of
XML documents that is derived from the SGML ESIS format.
(see ESIS - ISO 8879 Element Structure Information Set spec,
ISO/IEC JTC1/SC18/WG8 N931 (ESIS))
So what you realy want to do is something like :
$ xmlstarlet pyx <file.html> | do_your_magic_here | xmlstarlet depyx > file.new.html
In your case this would be something like:
$ xmlstarlet pyx file.html \
| awk 'c~/^- *\\n *$/&&/^)script$/{c=$0;next}{print c; c=$0}END{print c}' \
| xmlstarlet depyx
This will output
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta>
<title>JavaScript Ders 2</title>
<script language="javascript" src="script1.js" type="text/javascript"></script>
<script language="javascript" src="script2.js" type="text/javascript"></script>
<script>
// script kodumuz buraya yazılacak
</script>
</head>
<body>
<script language="javascript" src="script3.js" type="text/javascript"></script>
</body>
</html>
This might work for you (GNU sed):
sed 'N;s/\n\(<\/script>\)/\1/;P;D' file
Keep a window of two lines throughout the file and if the second line begins with </script>, remove the preceding newline.
Related
Everytime i tried to use for loop in the PyScript tag, getting an invalid Syntax error :/.What i want to do is (for example):
Python:
attr1=['A','B','C']
for i in attr1:
pyscript.write('output1',i)
HTML:
<div id='output1'></div>
You can just write to the document with print, it doesn't leave you with much choice about the tags for now though. For example,
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
l = ["A", "B", "C"]
for el in l:
print(el)
</py-script>
</body>
</html>
Will show
A
B
C
in the browser.
and it actually generates the following:
<html><head>
<title></title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script></head>
<body>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer="" src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script id="py-2536bda2-b41c-7165-4257-38c5d650d507"><div class="parentBox flex flex-col mx-8">
<div id="py-2536bda2-b41c-7165-4257-38c5d650d507"></div>
</div>
<div id="py-2536bda2-b41c-7165-4257-38c5d650d507-2">A</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-3">
</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-4">B</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-5">
</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-6">C</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-7">
</div></py-script>
<py-config></py-config></body></html>
An application is migrated and now there is an issue when een page is opened and in the console I see the error: "Uncaught ReferenceError: RichFaces is not defined"
It's a Java application on a Weblogic server.
JSF is old, but the application is new to me, I haven't build the application.
This is a part of the code:
<?xml version="1.0" encoding="UTF-8"?>
<f:view
contentType="text/html"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:win="http://winter.ba.uwv.nl/winter"
>
<html>
<h:head>
...
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<h:outputScript name="/javascript/jquery.timers.js" target="head" />
<h:outputScript name="/javascript/preloadCssImages.jQuery_v5.js" target="head" />
<h:outputScript name="/javascript/tooltip.js" target="head" />
<rich:jQuery />
<ui:remove><!-- Disable the a4j:loadStyle tags and enable the link tag to use plain setup --> </ui:remove>
<ui:insert name="head"/>
<h:outputScript target="head">
jQuery(document).ready(function() {
jQuery.preloadCssImages();
...
});
</h:outputScript>
</h:head>
<h:body>
...
The line <rich:jQuery /> is resulting in:
<span id="j_idt7" style="display: none;">
<script type="text/javascript">RichFaces.ui.jQueryComponent.query();</script>
</span>
And the line RichFaces.ui.jQueryComponent.query(); is resulting in the error:
Uncaught ReferenceError: RichFaces is not defined
at home.xhtml:13:152
(anonymous) # home.xhtml:13
I don't understand why a <span...> tag is added in the head?
It seems to me, but I'm not sure an artifact is missing. I have tried to add the following artifacts to my pom.xml file:
richfaces
richfaces-components-ui
richfaces-ui
richfaces-components-ui
richfaces-ui-core-ui
Has someone an idea how to solve "Uncaught ReferenceError: RichFaces is not defined" error?
---- UPDATE (after the Answer of Makhiel) ----
If we do not add the line rich:JQuery and the page is opnening than an jquery spinner is started, which never ends. It 'hangs' with this error:
Uncaught TypeError: jQuery.preloadCssImages is not a function
at HTMLDocument. (userList.xhtml:17:28)
at l (jquery-1.8.3.min.js:2:16996)
at Object.fireWith [as resolveWith] (jquery-1.8.3.min.js:2:17783)
at Function.ready (jquery-1.8.3.min.js:2:12504)
at HTMLDocument.A (jquery-1.8.3.min.js:2:9909)
This is the output in the browser and at line 13 there is the line which is mentioned by #Makhiel. Right after that line, is the line which gives the error: RichFaces.ui.jQueryComponent.query();.
<html>
<head id="j_idt2">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
/* Fix image caching problem */
try { document.execCommand("BackgroundImageCache", false, true); } catch(err) {}
</script>
<title>Winter</title>
<link rel="icon" href="/winter/favicon.ico" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<!-- This is the line of Makhiel mentioned, so it exists -->
<script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.5.17.Final/PackedCompressed/packed/packed.js"></script>
<span id="j_idt9" style="display: none;">
<script type="text/javascript">RichFaces.ui.jQueryComponent.query();</script>
</span>
...
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces-base-component.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.component.js">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.preloadCssImages();
//perhaps add delay
...
});
</script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces-queue.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/status.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/toolbar.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces-event.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/togglePanel.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/togglePanelItem.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/collapsiblePanel.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/collapsiblePanelItem.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/message.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.position.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces-utils.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/richfaces-selection.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/AutocompleteBase.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/Autocomplete.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/popupPanel.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/popupPanelBorders.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/popupPanelSizer.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/component-control.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/popup.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/menuKeyNavigation.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/menu-base.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/menu.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/menugroup.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/menuitem.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/contextmenu.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/tooltip.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/datatable.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/extendedDataTable.js"></script>
<script type="text/javascript" src="/winter/org.richfaces.resources/javax.faces.resource/org.richfaces/datascroller.js"></script>
...
</head>
<body>
...
rich:jQuery without any attributes doesn't do anything, so you might as well delete it.
You shouldn't need to add anything in your POM, if JSF didn't know what the richfaces tag was it wouldn't be translating it.
Your generated <head> should contain RichFaces JS sources, something like:
<script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.5.17.Final/PackedCompressed/packed/packed.js"></script>
This is where the RichFaces object is defined, if it's not on your page (and it sounds like it isn't) you might have a filter in place that blocks it.
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
I want to put newline before "< script" and after < /script> tags in an HTML file.
sed 's/<script/\'$'\n/g'
I tried that one but it deleted "script" tags.
Sample input:
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript Ders 2</title> <script type="text/javascript" src="script.js" language="javascript"></script> <script type="text/javascript" src="script.js" language="javascript"></script> <script></script> </head><body> <script type="text/javascript" src="script.js" language="javascript"></script> </body></html>
Sample output:
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript Ders 2</title>
<script type="text/javascript" src="script.js" language="javascript">
</script>
<script type="text/javascript" src="script.js" language="javascript">
</script>
<script>
</script>
</head><body>
<script type="text/javascript" src="script.js" language="javascript">
</script>
</body></html>
What I have to do?
Thanks
I'm assuming you're just doing this to make it easier to read, rather than attempting to format HTML using sed...
To add newlines before <script and </script (assuming that your version of sed understands \n):
sed -E 's|</?script|\n&|g' file
Match </?script (/? makes the / optional) and replace with a newline, followed by the full match &.
It doesn't quite match the output in your question since it looks like you want to put each opening/closing <script> tag on its own line, rather than just insert lines:
$ sed -E 's|</?script|\n&|g' file
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript Ders 2</title>
<script type="text/javascript" src="script.js" language="javascript">
</script>
<script type="text/javascript" src="script.js" language="javascript">
</script>
<script>
</script> </head><body>
<script type="text/javascript" src="script.js" language="javascript">
</script> </body></html>
Since you haven't posted any samples so couldn't test it, could you please try following and let me know then.
sed 's/<script>/\n&/;s/<\/script>/&\n/' Input_file
Let's say following is Input_file:
cat Input_file
<script>
fewvfewvvew
</script>
abcd
Then after executing code we will get following output then.
<script>
fewvfewvvew
</script>
abcd
use html-webpack-plugin output html page , but in output page lost body inner html element , like <div id="app"></div> , here is my input output and webpack.config file :
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" href="static/pic/logo.png" type="image/x-icon">
<link rel="stylesheet" href="static/weui/weui.min.css">
<link rel="stylesheet" href="static/index.css">
<title>APP</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/vendor.js"></script>
<script src="./dist/app.js"></script>
</body>
</html>
output
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SPA</title>
<link href="/dist/style.df241090c6a9e0a6bf26.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="/dist/vendor.df241090c6a9e0a6bf26.js"></script><script type="text/javascript" src="/dist/app.df241090c6a9e0a6bf26.js"></script></body>
</html>
part webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new htmlWebpackPlugin({
title:'SPA',
filename: 'assets/index.html'
})
],
The filename option is simply used as the output file, it won't read and modify the existing file, if one exists. Because if it did that, every new build would just append to it, unless you cleaned it manually. To use your input as the base, you need to use it as a template.
new htmlWebpackPlugin({
title:'SPA',
filename: 'assets/index.html',
template: 'path/to/template/index.html'
})
The template should not be the same as the output filename, otherwise it gets overwritten. See also Writing Your Own Templates. The template can be a regular HTML file and it will inject the necessary assets.