I want to force a line break inside the textarea like this <textarea>hello!\nbye<br>hello again\r\n i'm here</textarea>
but this way the page only shows like this: hello!\nbye<br>hello again\r\n i'm here
and it should appear something like:
bye
hello again
I'm here
it's something like  ?
which element should i use to make this line break?
A literal new line.
<textarea>bye
hello again
I'm here</textarea>
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<textarea id="message">Hello</textarea>
<script type="text/javascript" charset="utf-8">
const message = document.getElementById('message');
message.value = 'bye' + '\r\n' + 'hello again' + '\r\n' + 'Im here';
console.log(message.value);
</script>
</body>
</html>
Related
I'm using a tool to generate some html that looks something like this:
<html>
<head>
<title>Blah</title>
<style>
/* stuff */
</style>
</head>
But I'd like a way to replace that style tag with some custom styling
<link rel="stylesheet" href="style.css">
possibly with awk or sed so that I can add it to my Makefile.
Is this possible?
awk to the rescue!
This is not xml/html aware but a basic text substitution...
$ awk '/<style>/ {f=1}
!f;
/<\/style>/ {f=0;
print "<link rel=\"stylesheet\" href=\"style.css\">"}' file
will give
<html>
<head>
<title>Blah</title>
<link rel="stylesheet" href="style.css">
</head>
If you like tricks, check also this out:
$ ht=$'<html>\n<head>\n<title>Blah</title>\n<style>\n/* stuff */\n</style>\n</head>\n'
$ st=$'<link rel="stylesheet" href="style.css">'
$ echo "$ht"
<html>
<head>
<title>Blah</title>
<style>
/* stuff */
</style>
</head>
$ echo "$ht" |perl -0777 -pe "s/\n/\0/g;s/<style>.*<\/style>/$st/g;s/\0/\n/g"
<html>
<head>
<title>Blah</title>
<link rel="stylesheet" href="style.css">
</head>
echo '<html>
<head>
<title>Blah</title>
<style>
/* stuff */
</style>
</head>'|sed -e '/<style>/{:a;/<\/style>/!{N;ba};c <link rel="stylesheet" href="style.css">' -e'}'
<html>
<head>
<title>Blah</title>
<link rel="stylesheet" href="style.css">
</head>
#mef51: try: taking adaption from karafka's nice code, only thing is this code will print and tags too along with your new line.
awk '/<style>/ {print;f=1}
!f;
/<\/style>/ {f="";
print "<link rel=\"stylesheet\" href=\"style.css\">" ORS $0}' Input_file
Explanation: searching for string and then set variable f's value to ON/TRUE/one(1) and then checking condition !f if variable f's value is NULL(when line doesn't have or it will be NULL) so print the current line. now looking for string and printing the new line along with ORS(Output field separator, whose default value is new line) and the current line.
I am trying to create a webpage to be able to sell things online, and have come up with an issue while creating a file to automatically create a new item. I am trying to use Ruby to temporarily take off the end of the file, append the correct line to the file, and put the end back. My code so far is
puts "what is the item number?"
item_num = gets.chomp
puts "what is item description?(not optional)"
desc = gets.chomp
file_text = File.read("template.html")
file_text = file_text.gsub(/Item#/, "Item #{item_num.to_s}")
file_text = file_text.gsub(/<img class="item-image" src="">/, '<img class="item-image" src="' + item_num.to_s + '">')
file_text = file_text.gsub(/Item-desc/, desc)
puts file_text
file_create = File.new(item_num.to_s + ".html", "w")
file_create.puts(file_text)
file_create.close
item_page_end = '
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
'
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.gsub(item_page_end, "")
file_to_update = File.open("item_page.html", "a+")
file_to_update.puts( '<p class="col-md-4"><img src="../images/' + item_num + '.jpg" />Item' + item_num + '</p>')
file_to_update.puts(item_page_end)
sleep 10
The HTML file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHS Metal | Store</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/logo-icon.png"/>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../css/owl.carousel.css" rel="stylesheet">
<link href="../css/owl.theme.default.min.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main element">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="title mt80">Store</h2>
</div>
<div class="col-sm-12">
<div class="headings">
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="width=80%"/>
<script src="../js/jquery-3.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="https://use.fontawesome.com/55b73bf748.js"></script>
<script src="../js/jquery.magnific-popup.js"></script>
<script src="../js/script.js"></script>
</body>
</html>
What ends up happening is that the program inserts the HTML line I want to add to the "item_page.html" file to the end and then adding the "item_page_end" string at the end. Does anyone know how to fix it put the HTML line in the Ruby program after
<h2 class="title mt80">Store</h2>
Any other solution I have found is either for an array, a string or simply doesn't work.
If you can edit the HTML file, I see two possible answers:
(Please note that in all cases I use a function called add_all_elements which is a function that just returns whatever you want placed in your file.)
Cut your file in two, read the first half, add your elements and then read the second half. It should be something like this:
buffer = File.read("template_first_half.html")
buffer += add_all_elements()
buffer += File.read("template_second_half.html")
It is easy to use, but the HTML can be difficult to read.
You can also add a reference in the file and use gsub to replace it:
buffer = File.read("template.html")
buffer = buffer.gsub("#####anchor#####", add_all_elements())
Also easier to use, it will require that you place a unique sub-string within the file. The problem is that the reference must absolutely be unique within the file. The advantage is that the HTML file remains easy to read.
If you cannot edit the HTML file:
line_num = 0
buffer = ''
break_point = 42
text.each_line do |line|
if line_num == break_point
buffer += add_all_elements()
end
buffer += line
line_num += 1
end
Basically, you read the file line-by-line and place it into a buffer. When the line count reaches the required value (here, the variable break_point that I set at 42) you insert into the buffer all of the elements.
The inconvenient is that if the file is edited, the breaking point must be re-set each time. You could also use a string as a break point to avoid most of that problem.
You could do something like this:
file_to_update = File.read("item_page.html")
file_to_update = file_to_update.sub(/(?<=<h2 class="title mt80">Store<\/h2>)/,file_text)
File.write("item_page.html",file_to_update)
With this there's no need to create a new file for file_text.
Basically whats happening is the second line here uses a lookbehind assertion to insert file_text into file_to_update after "Store</h2>". Then you just overwrite the contents of item_page.html with the updated string.
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I have some HTML and wish to get the content under the <body> element. However, with whatever I tried, after the HTML is parsed using Nokogiri, everything inside <doctype> and <head> is also becoming part of the <body> element and when I retrieve the <body> element, I see stuff inside <doctype> and the <meta> and <script> tags too.
My original HTML is:
<!DOCTYPE html \"about:legacy-compat\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>Some Title</title>
<meta name='viewport' id='helloviewport' content='initial-scale=1.0,maximum-scale=2.5' />
<link rel='stylesheet' id='hello-stylesheet' type='text/css' href='some-4ac294cd125e1a062562aca1c83714ff.css'/>
<script id='hello-javascript' type='text/javascript' src='/hello/hello.js'></script>
</head>
<body marginwidth=\"6\" marginheight=\"6\" leftmargin=\"6\" topmargin=\"6\">
<div class=\"hello-status\">Hello World</div>
<div valign=\"top\"></div>
</body>
</html>
The solution I am using is:
parsed_html = Nokogiri::HTML(my_html)
body_tag_content = parsed_html.at('body')
puts body_tag_content.inner_html
What am I getting:
<p>about:legacy-compat\"></p>
\n
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
\n
<title>Some title</title>
\n
<meta name='viewport' id='helloviewport' content='initial-scale=1.0,maximum-scale=2.5' />
\n
<link rel='stylesheet' id='hello-stylesheet' type='text/css' href='some-4ac294cd125e1a062562aca1c83714ff.css'/>
\n<script id='hello-javascript' type='text/javascript' src='/hello/hello.js'></script>
<div class=\"hello-status\">Hello World</div>
\n
<div valign=\"top\">\n\n</div>
What am I expecting:
<div class=\"hello-status\">Hello World</div>
\n
<div valign=\"top\">\n\n</div>
Any idea what's happening in here?
I got your example to work by first cleaning up the original HTML. I removed the "about:legacy-compat" from the Doctype which seemed to be messing Nokogiri up:
# clean up the junk in the doctype
my_html.sub!("\"about:legacy-compat\"", "")
# parse and get the body
parsed_html = Nokogiri::HTML(my_html)
body_tag_content = parsed_html.at('body')
puts body_tag_content.inner_html
# => "\n <div class=\"hello-status\">Hello World</div>\n <div valign=\"top\"></div>\n "
In general, when you're parsing potentially dirty third-party data such as HTML, you should clean it up first so the parser doesn't choke and do unexpected things. You could run the HTML through a linter or "tidy" tool to try and automatically clean it up. When all else fails, you'll have to clean it by hand as above.
HTML tidy/cleaning in Ruby 1.9
I was playing around with HTML DOM, and I noticed that two properties don't agree with each other with no apparent reason. Consider this simple HTML file:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
I expected body and alt_body to be identical, but .childNodes insists giving me a text node. (Below is the content of script.js)
body = document.documentElement.childNodes[1]
alt_body = document.documentElement.lastChild;
console.log(body.nodeType) //prints 3 (Node.TEXT_NODE)
console.log(alt_body.nodeType) //prints 1 (Node.ELEMENT_NODE)
console.log(body.childNodes.length) //prints 0
console.log(alt_body.childNodes.length) //prints 8
Does anyone know why it's acting that way?
It's because childNodes returns a text line node as well
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
0 : will be <head> node
1 : will be empty text ( considered as a node )
2 : will be <body> node ( lastChild in this HTML )
Try after getting rid of all the linefeeds and spaces like this below.
<html><head><title>DOM Example</title></head><body><p>Hello World!</p><p>Isn't this exciting?</p><p>You're learning to use the DOM!</p></body><script type="text/javascript" src="script.js"></script></html>
Then the result will be what you expected.
childNodes[1] isn't the last child, because there are three children:
[0] The Head Element
[1] The Text Node containing the newline character between your </head> and <body>.
[2] The body element
If you were to remove the newline and all spaces between </head> and <body> you would find that childNodes[1] === lastChild:
<html>
<head>
<title>DOM Example</title>
</head><body>
<p>Hello World!</p>
<p>Isn't this exciting?</p>
<p>You're learning to use the DOM!</p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>