Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
dev:technologies [2011/07/23 10:39] – [XPath] migrate Firebug-- still need to make more useful and more ajlyon | dev:technologies [2017/12/07 13:42] – bwiernik | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | A very brief introduction to some commonly used technologies | + | Three commonly-used technologies in [[dev: |
- | ====== XPath ====== | + | ==== CSS Selectors |
- | XPath provides a way to refer to specific parts of HTML or XML documents. It's usually the best way to extract data from webpages when writing a translator. | + | A comprehensive and accessible resource is available from W3Schools: |
+ | https://www.w3schools.com/ | ||
- | An XPath expression is a chain of pieces that specify the path to a node of the document. | + | The Mozilla Development Network (MDN) also provides a CSS Selector resource:\\ |
+ | https:// | ||
- | * ''/'' | + | ==== XPath ==== |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * Plus much more. See the [[http:// | + | |
- | The best introduction to XPath for use in translators | + | A tutorial |
+ | https://www.liquid-technologies.com/xpath-tutorial | ||
- | === Examples | + | ==== Regex ==== |
- | <code html> | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | < | + | |
- | <tr class=" | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | For the sample document above, these expressions would refer to... | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | === Using Firebug to design XPath expressions === | + | There are many high-quality regex tutorials available online. A comprehensive guide is provided all in one page at:\\ |
+ | https:// | ||
- | To make it easier to design XPath expressions, | + | Regex 101 also provides |
- | + | http://regex101.com/ | |
- | First, install Firebug and restart Firefox. You'll see a bug icon at the bottom right hand side of your browser window: | + | |
- | + | ||
- | {{firebug2.png|}} | + | |
- | + | ||
- | {{firebug1.png|}} | + | |
- | + | ||
- | Click the icon to open the Firebug pane, which will show lots of details about the current page: | + | |
- | + | ||
- | {{firebug3.png}} | + | |
- | + | ||
- | Next, click the " | + | |
- | + | ||
- | {{firebug4.png}} | + | |
- | + | ||
- | Firebug will highlight the part of the web page's code that corresponds to the location you clicked on. Right-click on that piece of code in the Firebug pane and select "Copy XPath" | + | |
- | + | ||
- | Then we can paste the XPath expression into the editor (i.e., the code pane of [[dev: | + | |
- | + | ||
- | < | + | |
- | /html/body/ | + | |
- | </ | + | |
- | + | ||
- | XPath like this, however, is very fragile. It's better to latch onto some identifiers and make an expression relative to them: | + | |
- | < | + | |
- | // | + | |
- | </ | + | |
- | + | ||
- | ====== Regular Expressions ====== | + | |
- | Regular expressions are a way of matching and extracting pieces of text from a larger body of text. In translator development, | + | |
- | + | ||
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * '' | + | |
- | * ''?'' | + | |
- | + | ||
- | For a complete description of how regular expressions are used in JavaScript, with examples of their use, see Mozilla' | + | |
- | + | ||
- | There are many regular expressions guides on the web, and entire books on the topic. While you can and should consult these guides, keep in mind that the details of how they work will depend a little on the environment they' | + |