3

Similar to: Search For Words, Replace With Links. However, I would rather not have the full hyperlink's URL visible, but instead have only the appearance of a hyperlink visible to the end-user. --- I also can't figure out how to use the replace()-JS-function, like used in the following post: How to replace all occurrences of a string in JavaScript?, for this same specific issue. --- Also similar to a JS-question: Link terms on page to Wikipedia articles in pure JavaScript, but I guess the answer given there can not, up front, differentiate between ambiguous terms.

How to auto-link every occurence of single words or word sequences to their respective predefined URL's?

In (a) certain HTML-page(s), is it possible to:

  • Predefine manually; or automatically (Cf: Wiki-api) a list of single words and their respective (i.c. Wikipedia)-articles;
  • such that every (such coupled) word in a document automatically receives the predefined link to the respective (i.c. Wikipedia)-article.

EXAMPLE:

(1) Wherever the word cell occurs, this word should receive the link: ...wiki/cell, to give the following result: a cell is but a cell.

So, what I actually would like is to mimic what is actually happening within any Wikipedia-article itself (although I don't know whether this is automated there).

Any help would be greatly appreciated.

Community
  • 1
  • 1
O0123
  • 481
  • 9
  • 28
  • SO is not for broad questions, suggestions, or help finding a plugin. Please review: ["How to Ask"](http://stackoverflow.com/help/how-to-ask) – Sparky Feb 08 '15 at 19:19
  • Tags should be used to represent the content of the question. I don't see anything mentioned about JavaScript in the question. Edited tags. Thanks. – Sparky Feb 08 '15 at 19:22
  • What are you using to create this document? – grovesNL Feb 08 '15 at 19:29
  • @grovesNL - Thank you for your question: I now specified the document-type in the question: "ordinary" `HTML`. --- Or did you mean perhaps to ask my *[CMS](http://en.wikipedia.org/wiki/Content_management_system)*? Me, specifically, I am using Drupal to create this `HTML`-article. --- @Sparky - Thank you for your edit. I think one might somehow use a *JS* for a `replace()`-function similar functions, as referred to now in the question. --- I also edited my question, in the hope to be as clear and to-the-point as possible about its technicalities; thanks. – O0123 Feb 08 '15 at 20:47

1 Answers1

2

Starting with the question you linked, it's pretty easy to modify it to achieve your goal. So first assuming we have a list of phrase and links like this:

var words = [
    { word: 'foo', link: 'http://www.something.com' },
    { word: 'Something Else', link: 'http://www.something.com/else' ]
];

We can iterate over that list replacing any occurrence in the document, but including the word we are searching for in the text we are inserting. I've added in a tooltip to this too to show an example of what else you can do.

$(function() {
    $.each(words,
        function() {
            var searchWord = this.word;
            var link = this.link;
            $('body:contains("' + searchWord + '")').each(function() {
                var newHtml = $(this).html().replace(searchWord, 
                    '<a class="wikilink" title="here is a link to Wikipedia" href="'+link+'">' + searchWord + '</a>');
                $(this).html(newHtml);
            });
        }
    );
});

And a working example: http://jsfiddle.net/yxhk1fcd/10/

DavidG
  • 113,891
  • 12
  • 217
  • 223
  • Thank you very much for this exquisite answer. I like very much how you included `title="here is a link to Wikipedia"` as well. --- Your answer has advantage over the answer given in: http://stackoverflow.com/questions/2347992/link-terms-on-page-to-wikipedia-articles-in-pure-javascript, since your answer can include predefined URL's, which seems necessary to me when wanting directly to link to a specific page (e.g. *Cell_biology*), without being directed to the (e.g. *Cell*) disambiguation page (which would be expected behavior using the answer from the hyperlinked post. – O0123 Feb 09 '15 at 06:34
  • Are you sure it's an endless loop and not just a race condition? For example, does this script kick off some other script which in turn causes this one to run again? Also, is this script wrapped in a document ready check `$(function() { code-here });`? – DavidG Feb 09 '15 at 10:08
  • Step through the code and see exactly what is happening. Let it run for a second then pause in the debugger. – DavidG Feb 09 '15 at 10:18
  • It may be preferable for you to only replace words in certain areas of your page. To change that, just replace `body:contains` with a different selector. So if your text block was wrapped in a div with class `blog` you would use `.blog:contains` – DavidG Feb 09 '15 at 10:49
  • Like I said above, it will work if you use a specific selector. Wrap your entire content in a `div` and use that instead. – DavidG Feb 09 '15 at 20:20
  • I removed my comments, thank you very much, this indeed solves the waiting / hanging time. --- Might I perhaps ask for some help on another issue? When having the following *HTML*: `A stem cell is a kind of cell, but also a cell.`; and the following *Javascript*-"array": `{ word: 'cell', link: 'http://www.something.com/else' }, { word: 'stem cell', link: 'http://en.wikipedia.org/wiki/Stem_cell' }`; there seems to be a problem in recognizing `stem cell`, as well as with recognizing both of the other `cell`'s... – O0123 Feb 09 '15 at 21:43
  • Do stem cell first, then cell. – DavidG Feb 09 '15 at 21:43
  • Thanks for your reply. It does give partly the desired result, in this simple case. --- However, the second instance of cell is not hyperlinked. --- So, especially for large documents too, could you suggest any new way to take for improving the code, when working with large files, containing many terms? – O0123 Feb 09 '15 at 22:01