fragmentions
Advanced tools
Fragmentions are anchors to individual words or phrases in a document.
(A fork to publish to npm)
Install with npm then import.
import('fragmentions')
Fragmentions are anchors to individual words or phrases in a document.
<a href="##this+specific+text+">Find this specific text</a>
Fragmentions use ## double-hash changes to match words or phrases in a document, jumping to their corresponding element. Matches are case sensitive and whitespace insensitive. Corresponding elements may be spans, paragraphs, headings, buttons, inputs, or any other container element.
In the following example, clicking TL;DR would jump to the <strong> element containing Life, Liberty and the pursuit of Happiness.
<article>
<p>
<a href="##pursuit">TL;DR</a>
</p>
<p>
When in the Course of human events, it becomes necessary for one people
to dissolve the political bands which have connected them with another,
and to assume among the powers of the earth, the separate and equal
station to which the Laws of Nature and of Nature’s God entitle them, a
decent respect to the opinions of mankind requires that they should
declare the causes which impel them to the separation.
</p>
<p>
We hold these truths to be self-evident, that all men are created
equal, that they are endowed by their Creator with certain unalienable
Rights, that among these are <strong>Life, Liberty and the pursuit of
Happiness</strong>.
</p>
</article>
In another example, a ##★★★★☆ unicode fragmention would jump to the 4/5 star rating.
<abbr class="rating" title="4" tabindex="0">★★★★☆</abbr>
Additionally, location.fragmention returns a decoded fragmention, in the same manner that location.hash returns a decoded fragment.
While elements should not use IDs leading with a # single-hash, ## double-hash fragments with a matching ID (e.g. ##term and id="#term") will not be interpretted as fragmentions.
While fragmentions should lead with a ## double-hash, single-hash fragments with no matching ID (e.g. #and+justice+for+all) will be interpretted as fragmentions.
The fragmention polyfill lets documents respond to fragmentions. When a fragmention is detected, the document is searched for its matching text. If a match is found, the window jumps to its corresponding element, adding a fragmention attribute for styling.
Additionally, the window.location object is given a fragmention property.
The fragmention polyfill has been successfully tested in desktop Chrome, Firefox, Safari, Opera, and Internet Explorer, as well as Firefox on Android and Safari on iOS. Legacy Internet Explorer browsers (6-8) are also supported, but marked as deprecated.
Notes: If existing fragmention support is detected on the window.location object, the polyfill is ignored. To work around an issue with Firefox decoding location.hash, location.href is used to interpret fragmentions instead. To work around various issues with old IE, light hacking ensues.
The fragmention extension for Google Chrome duplicates the functionality of the JavaScript polyfill for all pages on the internet. Thanks to feature detection, the extension will not conflict with pages already using the JavaScript polyfill or future versions of Chrome that may support fragmentions.
While most find the idea of fragmentions delightful, there are differing ideas on how they should work. We ask that contributors justify feature requests with concrete real world examples, as tests in the wild may reveal best practices. Otherwise, any of these challenges could be appended with, “So, uh, what do you think?”
The current URL specification does not allow fragments to contain # hashes, so links with double-hashes like <a href="##foo"> will fail current validation. These specifications can be updated, and the invaliding weakness of ## may be conversely interpreted as a non-conflicting quality.
Browsers, on the other hand, do allow hashes, so invalid links in the wild like <a href="##foo"> might generate conflict. As a result, fragmentions will always defer to fragments with matching IDs.
Other spec-valid alternatives to the ## double-hash convention include #@ (hash + mention) and #* (hash + footnote).
Fragmentions are case sensitive, making it easier to target specific text. However, if fragmentions were to be case insensitive, it would be easier to write them by hand. At first, there was no consensus on which practice was better, and over time case sensitivity has been accepted as the better choice.
Fragmentions are decoded before search, which means + plus signs are interpreted as spaces. This makes for prettier, conforming URLs, but may also be confusing for users targeting phrases using the space character. Therefore, plus signs in content must be escaped as %2B.
Thanks, now test it yourself, give us feedback, and have fun!
The fragmention script is 2.8KB or 578B minified + gzipped.
#10#8#7#6#5#4#3FAQs
Fragmentions are anchors to individual words or phrases in a document.
We found that fragmentions demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.