Crude javascript create link

100%

Crude javascript create link

✓ Published0🌍 Public

Last edited Feb 24, 2012

Created on Feb 24, 2012

This example implements a JavaScript function that converts plain text into HTML links by identifying URL-like patterns. It relies on a regular expression stored in `expression` and instantiated with the `RegExp` constructor to match domains and paths. The `makeLink` function scans the input string, strips any leading `http://` or `https://` protocol, then uses jQuery’s `$()` and `.each()` method to iterate over matched substrings and replace each occurrence with an anchor tag that points to the matched URL. The rendered output is intended for inline display in a web page.

AI-generated description

Similar vizzes

Loading thumbnail…

hello

This example demonstrates HTML hyperlink behavior through four anchor tags, each using a different `target` attribute value (`_blank`, `_self`, `_parent`, `_top`) to control where the linked W3C site opens. The page also includes a JavaScript alert that fires on load, plus external styling from `info.css` and a separate `java.js` file that writes dynamic content to the document using `document.write`. The rendering relies on plain HTML, CSS, and vanilla JavaScript without any visualization libraries or frameworks, showing a basic interactive web page rather than a data-driven chart.

Kkimgooq

59% match

Loading thumbnail…

D3 Link Example

This example demonstrates how to make an SVG element function as a hyperlink in D3, allowing visual marks to navigate to external pages. It renders a single blue rectangle inside an SVG canvas and wraps it with an anchor element using the `xlink:href` attribute to link to Google. The code appends the SVG and rectangle dynamically using D3's selection and chaining methods, with the D3 library loaded from a CDN. The example highlights standard link behavior, such as opening in the current tab or a new tab with the meta key, though it notes that iframe-based viewers may interfere with such interactions.

CCurran Kelleher

58% match

Loading thumbnail…

Gist ec916d1fc2f8a4ed9fb9

This example demonstrates a minimal URL-based interaction pattern for a web page. It shows how a query string parameter, such as `?targetDiv`, is parsed with jQuery and used to reveal a specific hidden element on the page. The code uses `$(location).attr('search')` to retrieve the raw query string, strips the leading question mark with `substring(1)`, and then calls a `doStuff()` function that targets the named div via `$("#" + targetDiv).show()`. No data visualization or charting library is involved; the focus is purely on client-side DOM manipulation driven by the page’s URL.

LLayne Smith

58% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal interactive JavaScript console that evaluates regular expression strings and displays the results. The code uses `document.write`, `eval`, and DOM manipulation via `getElementById` and `createTextNode` to render output lines. It also includes regex escaping logic from the JavaScript standard library, applied to test pattern replacement. The HTML layer uses basic CSS selectors for striped background rows.

RRussell Watson

56% match

Loading thumbnail…

Testa

This example demonstrates a simple interactive event-handling pattern for HTML links. Two links, each bound to a separate instance of a JavaScript `Obj` constructor, respond to clicks by logging a greeting to the console. The code relies on native DOM APIs such as `document.getElementById` and the `onclick` property, while closures capture each instance’s current `word` property. The first link logs “Hola testa” after the property is reassigned, while the second logs “Hello testa,” illustrating how per-instance state persists. No external libraries or data sources are used; the behavior is purely client-side.

DDylanFM

55% match

Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM

55% match

Loading thumbnail…

D3 Links Example

This example shows how to link SVG visual marks to external web pages by constructing URLs from data properties. Three rectangles each link to a different Wikipedia article, with the hyperlink target generated dynamically from an array of strings. The code uses D3.js (version 3.5.5) to bind data to anchor elements via `selectAll("a").data(data).enter()`, then sets the `xlink:href` attribute using a function that concatenates the data value with the Wikipedia base URL. Each rectangle is positioned with the `attr` method, and the rendering is SVG.

CCurran Kelleher

55% match

Loading thumbnail…

HTML Link

This example demonstrates a minimal HTML page that displays the text "Hello" followed by a hyperlink to a Wikipedia article about Carl Friedrich Gauss. The page uses vanilla HTML and CSS, with the body styled for centered, large text at 13em. A small JavaScript snippet logs a message to the browser's developer console, showing basic script integration within an HTML document. The visualization serves as a bare-bones starting point for web development, illustrating how static content and client-side scripting coexist in a single file.

CCurran Kelleher

55% match