I have a javascript program that will copy a selection in a web page.
Is it possible to set that range selection through javascript?
Ex:
<html>
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
</html>
I would like to set the range for everything between <h2> and <h4> so that I can copy the text to the clipboard.
I finally found the answer I was looking for...
It was at https://javascript.info/selection-range
Thanks guys for the -1... if you didn't know the answer or wanted clarification, you should have just said so.
Related
JS is not my main skill, hope someone can help. I am trying to make a GTM variable to extract . Problem is that I cant use class="rg-trailer-icon" as a class name because it changes based on the truck type that is viewed (trailer, truck, etc)
Thank you!
You can extract the title. You just have to scramble through.
t = document.querySelector('#scheduleContainer svg title').innerHTML
console.log(t)
<div id="scheduleContainer">
<div>
<div>
<svg>
<title>Hello</title>
<path>
</svg>
</div>
</div>
</div>
in javascript, using document.title should be enough
As a project, I want to try programming my own WYSIWYG editor (kind of similar to https://github.com/yabwe/medium-editor ) or at least be able to edit the already created medium-like editor to include my own functionalities. Can someone give me guidance on editing the yabwe medium-editor to include my own functionalities? Which classes would I edit to include/delete a function. If I wanted to program my own editor, how do I get the editor to pop up when I highlight some text. Thank you!
What you need primarily is a div with contenteditable attribute. You can set data inside it using dangerouslysethtml prop in react or setinnerhtml in normal javascript. You will be able to type inside it, and use onChanged event to capture the changes inside the div and make the text styles inside this function
document.getElementById("inner").innerHTML = "Paragraph changed!";
#inner{background:yellow}
<!DOCTYPE html>
<html>
<body>
<div class="outer" contenteditable="true">This is a paragraph. <span id="inner"></span> Try to change this text.</div>
</body>
</html>
Hi I have a question about automating selecting certain content in an HTML. So if we save an webpage as html only, then we'll get HTML codes along with other stylesheets and javascript codes. However, I only want to extract the HTML codes between <div class='post-content' itemprop='articleBody'>and</div> and then create a new HTML file that has the extracted HTML codes. Is there a possible way to do it? Example codes are down below:
<html>
<script src='.....'>
</script>
<style>
...
</style>
<div class='header-outer'>
<div class='header-title'>
<div class='post-content' itemprop='articleBody'>
<p>content we want</p>
</div>
</div></div>
<div class='footer'>
</div>
</html>
While I'm typing, I'm thinking about javascript, which seems to be able to manipulate HTML DOM elements..Is Ruby able to do that? Can I generate a new clean html that only contains content between <div class='post-content' itemprop='articleBody'>and</div> by using javascript or Ruby? However, as for how to write the actual code, I don't have a clue.
So anybody has any idea about it? Thank you so much!
I'm not quite sure what you're asking, but I'll take a crack at it.
Can Ruby modify the DOM on a webpage?
Short answer, no. Browsers don't know how to run Ruby. They do know how to run javascript, so that's what usually used for real-time DOM manipulation.
Can I generate a new clean html
Yes? At the end of the day, HTML is just a specifically formatted string. If you want to download the source from that page and find everything in the <div class='post-content' itemprop='articleBody'> tag, there are a couple of ways to go about that. The best is probably the nokogiri gem, which is a ruby HTML parser. You'll be able to feed it a string (from a file or otherwise) that represents the old page and strip out what you want. Doing that would look something like this:
require 'nokogiri'
page = Nokogiri::HTML(open("https://googleblog.blogspot.com"))
# finds the first child of the <div class="post-content"> element
text = page.css('.post-content')[0].text
I believe that gives you the text you're looking for. More detailed nokogiri instructions can be found here.
You want to use a regular expression. For example:
//The "m" means multi-line
var regEx = /<div class='post-content' itemprop='articleBody'>([\s\S]*?)<\/div>/m;
//The content (you'll put the javascript at the bottom
var bodyCode = document.body.innerHTML;
var match = bodyCode.match( regEx );
//Prints to the console
console.dir( match );
You can see this in action here: https://regex101.com/r/kJ5kW6/1
I am trying to display a web page according to the language that I will specified. For example:
<body>
<div id="monlabel"> Bonjour </div>
</body>
when I choose frensh, the text in the div text will be 'bonjour', and when I choose english, the div text will be 'good morning'.
I thought about a properties file, but I didn't figure out how to read it using the javascript and apply it to my web page.
Thanks in advance.
I have searched a lot and couldn't found the approach to create the small text box right next to the cursor, when doing hover over on HTML object.
Example http://guyzyl.org/wp/Picture1.png
You can see cursor is not visible in this example, but the text box appears on hover over. I would like to create some thing similar.
Example is taken from the Facebook.
Thanks for the help
tooltips can be obtained on tags adding the title attribute to them, e.g.:
my link
fancier looking tooltips can be obtained using javascript but the above is the correct semantic option (many tooltip plugins expect it to be in your code anyway)
Use this :
<img title="my tooltip" src="" alt=""/>
It's called tooltip. write like this for example:
<div class="parent">
<p>create group</p>
<div class="tooltip">tooltip</div>
</div>
CSS
.tooltip{
display:none;
}
.parent:hover .tooltip{display:block;}
Check this http://jsfiddle.net/zDLzF/
There are many fancy tooltips available. The Simplest jQuery Tooltip Ever - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery