Searchable Widget – Automatic links for Wikipedia, YouTube and Google

Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight jQuery-CSS solution populates the icon links automatically, all you have to do is add the searchable class to the HTML tag.

Live Demo

search text on wikipedia youtube google widget

HTML

Just as I said above, you can add the searchable class to any HTML item: list items, divs, paragraphs, or as the example below shows, to inline span tags:

<p>Look for <span class="searchable">Pranx.com</span> for great online pranks.</p>

JavaScript

The JavaScript is using jQuery to parse the document and render the searchable items. It adds svg icons with three links to search the text on Wikipedia, YouTube and Google. Using the same technique you can set up new search icons, for example Reddit, LinkediIn and others.

Our search links will stop working if one of these websites changes its search page or how they encode and pass the query to that. We have to keep our eyes open and check for broken links.

$(document).ready(function() {
    $(".searchable").each(function() {
        var txt = $(this).text();
        var append = '<a href="https://www.google.com/search?q=' + txt.replaceAll(" ","+") + '" target="_blank" title="Search on Google" rel="external nofollow"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path style="fill:#FBBB00;" d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256 c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456 C103.821,274.792,107.225,292.797,113.47,309.408z"/><path style="fill:#518EF8;" d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451 c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535 c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"/><path style="fill:#28B446;" d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512 c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771 c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"/><path style="fill:#F14336;" d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012 c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0 C318.115,0,375.068,22.126,419.404,58.936z"/></svg></a>'
        $(this).append(append);
        append = '<a href="https://youtube.com/results?search_query=' + txt.replaceAll(" ","+") + '" target="_blank"  title="Watch on YouTube" rel="external nofollow"><svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m.522 17.874c.49 1.738 1.989 2.056 2.089 2.117 2.467.672 16.295.674 18.799 0 1.715-.496 2.03-2.017 2.089-2.117.653-3.474.696-8.003-.03-11.945l.03.196c-.49-1.738-1.989-2.056-2.089-2.117-2.434-.661-16.298-.686-18.799 0-1.715.497-2.03 2.017-2.089 2.117-.699 3.651-.734 7.84 0 11.749zm9.086-2.223v-7.293l6.266 3.652z" fill="#e53935"/></svg></a>'
        $(this).append(append);
        append = '<a href="https://en.wikipedia.org/wiki/Special:Search?search=' + txt.replaceAll(" ","+") + '" target="_blank"  title="Search on Wikipedia" rel="external nofollow"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 315.459 315.459" style="enable-background:new 0 0 315.459 315.459;" xml:space="preserve"> <path  style="fill:#36c;" d="M307.459,45.862h-66.126c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8h16.761 c0.045,0.041-50.677,132.866-50.677,132.866l-27.326-61.454c0,0,35.881-71.219,36.01-71.413h7.565c4.4,0,8-3.6,8-8V53.862 c0-4.4-3.6-8-8-8H174.54c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8h6.849c-0.3,0.98-16.555,37.044-16.555,37.044 s-15.433-34.574-16.419-37.044h1.718c4.401,0,8-3.6,8-8V53.862c0-4.4-3.599-8-8-8H98.008c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8 h6.98c1.36,2.028,35.811,77.526,38.443,83.907l-22.452,49.196c-12.889-30.053-43.79-102.504-54.261-130.565 c-0.382-0.999-0.66-1.829-0.876-2.538H80.33c4.4,0,8-3.6,8-8V53.862c0-4.4-3.6-8-8-8H8c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8 h12.595c0.693,0.781,28.766,69.079,42.392,101.024c12.59,29.512,25.607,60.028,34.033,81.874c0.016,0.043,0.033,0.085,0.05,0.127 c1.476,3.626,5.965,14.662,15.778,14.662c8.42,0,13.691-8.221,16.924-14.404c0.029-0.056,0.06-0.115,0.088-0.173 c6.779-13.828,19.025-41.102,28.636-62.762c12.628,30.43,21.469,51.357,26.318,62.3c1.603,3.645,6.48,14.738,16.227,14.739h0.002 c9.475,0,14.553-10.642,16.221-14.138c0.061-0.128,0.117-0.257,0.172-0.388c17.086-41.74,67.248-167.921,67.753-169.191 c0.038-0.097,0.075-0.194,0.109-0.293c1.742-4.978,4.058-8.708,7.048-11.376c0.891-0.787,2.012-1.449,3.327-2.002h11.786 c4.4,0,8-3.6,8-8V53.862C315.459,49.462,311.859,45.862,307.459,45.862z"/></svg></a>'
        $(this).append(append);
    });
});

CSS

The styles are the part you most likely will adjust to match your template.

.searchable {
    display: block;
    padding: 0 2px;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #7194db;
}
.searchable:hover {
    background: #eef4ff;
}
span.searchable {
    display: inline-block;
    padding-right: 100px;
    font-weight: bold;
    color: #3a5896;
}
li.searchable {display: list-item}
.searchable a {
    display: inline-block;
    opacity: 0.7;
    position: absolute;
    right: 5px;
    top: 2px;
    padding: 0 5px;
    left: auto;
}
.searchable a:nth-child(2) {    right: 35px;    }
.searchable a:nth-child(3) {    right: 65px;    }
.searchable a:nth-child(4) {    right: 95px;    }
.searchable a:nth-child(5) {    right: 125px;   }
.searchable a:hover {opacity: 1}
.searchable a svg {height: 20px;width: 20px}

The Result

The end result should look like this if the setup was correct. See the live demo if you don’t believe it.

searchable links