[JavaScript] Convert Text to Link in HTML


See demo first. (demo texts from the note in SN.1.11)

  「世尊;眾祐」,南傳作「世尊」
  (bhagavā,音譯為「婆伽婆;婆伽梵;薄伽梵」,
  義譯為「有幸者」,古譯為「尊祐」),
  菩提比丘長老英譯為「幸福者」(the Blessed One)。
  請參看〈世尊譯詞的探討〉。

View page source of this web page, and you will find 世尊譯詞的探討 is plain text in the page source. It is converted to a clickable link (<a> tag) via JavaScript.

The following is the source code of the demo.

JavaScript:

var textToUrlMapping = {
  "世尊譯詞的探討": "http://agama.buddhason.org/book/bb/bb21.htm",
};

function TextToLink(elm) {
  elm.innerHTML = elm.innerHTML.replace(/〈(.+)〉/g, function(text, str1) {
    if (textToUrlMapping.hasOwnProperty(str1)) {
      return '〈<a href="'+ textToUrlMapping[str1] +
             '" target="_blank">' + str1 +
             '</a>〉';
    }
    return str1;
  });
}

var t = document.querySelector(".line-block");
TextToLink(t);
  • Use querySelector to select the element which contains the texts.
  • Call TextToLink function to convert the text in the element to link.
  • In TextToLink function, extract the text in 〈〉 via the pattern 〈(.+)〉.
  • Get the URL from text-to-url mapping, and create the link by the text and url.

Tested on: Chromium 63.0.3239.84 on Ubuntu 17.10 (64-bit)


References:

[1]