example: Convert Text to Link in HTML

siongui · siongui · commit 47c00cc6bcb3 · 2018-01-14T04:39:18.000+08:00
diff --git a/020-convert-text-to-link/app.js b/020-convert-text-to-link/app.js
@@ -0,0 +1,17 @@
+var textToUrlMapping = {
+  "&#19990;&#23562;&#35695;&#35422;&#30340;&#25506;&#35342;": "http://agama.buddhason.org/book/bb/bb21.htm",
+};
+
+function TextToLink(elm) {
+  elm.innerHTML = elm.innerHTML.replace(/&#12296;(.+)&#12297;/g, function(text, str1) {
+    if (textToUrlMapping.hasOwnProperty(str1)) {
+      return '&#12296;<a href="'+ textToUrlMapping[str1] +
+             '" target="_blank">' + str1 +
+             '</a>&#12297;';
+    }
+    return str1;
+  });
+}
+
+var t = document.querySelector(".line-block");
+TextToLink(t);
diff --git a/020-convert-text-to-link/appdom.go b/020-convert-text-to-link/appdom.go
@@ -0,0 +1,30 @@
+package main
+
+import (
+	. "github.com/siongui/godom"
+	"regexp"
+)
+
+var textUrl = map[string]string{
+	"&#19990;&#23562;&#35695;&#35422;&#30340;&#25506;&#35342;": "http://agama.buddhason.org/book/bb/bb21.htm",
+}
+
+var text = regexp.MustCompile(`&#12296;.+&#12297;`)
+
+func TextToLink(elm *Object) {
+	h := text.ReplaceAllStringFunc(elm.InnerHTML(), func(match string) string {
+		key := match[3 : len(match)-3]
+		url, ok := textUrl[key]
+		if ok {
+			return `&#12296;<a href="` + url +
+				`" target="_blank">` + key + `</a>&#12297;`
+		}
+		return match
+	})
+	elm.SetInnerHTML(h)
+}
+
+func main() {
+	b := Document.QuerySelector(".line-block")
+	TextToLink(b)
+}
diff --git a/020-convert-text-to-link/index.html b/020-convert-text-to-link/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Convert Text to Link in HTML</title>
+</head>
+<body>
+
+<div class="line-block">
+<div class="line">&#12288;&#12288;&#12300;&#19990;&#23562;&#65307;&#30526;&#31056;&#12301;&#65292;&#21335;&#20659;&#20316;&#12300;&#19990;&#23562;&#12301;</div>
+<div class="line">&#12288;&#12288;(bhagav&#257;&#65292;&#38899;&#35695;&#28858;&#12300;&#23110;&#20285;&#23110;&#65307;&#23110;&#20285;&#26805;&#65307;&#34180;&#20285;&#26805;&#12301;&#65292;</div>
+<div class="line">&#12288;&#12288;&#32681;&#35695;&#28858;&#12300;&#26377;&#24184;&#32773;&#12301;&#65292;&#21476;&#35695;&#28858;&#12300;&#23562;&#31056;&#12301;)&#65292;</div>
+<div class="line">&#12288;&#12288;&#33769;&#25552;&#27604;&#19992;&#38263;&#32769;&#33521;&#35695;&#28858;&#12300;&#24184;&#31119;&#32773;&#12301;(the Blessed One)&#12290;</div>
+<div class="line">&#12288;&#12288;&#35531;&#21443;&#30475;&#12296;&#19990;&#23562;&#35695;&#35422;&#30340;&#25506;&#35342;&#12297;&#12290;</div>
+</div>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/Makefile b/Makefile
@@ -9,7 +9,7 @@ endif
 
 GO_VERSION=1.9.2
 
-WEBSITE_DIR=019-tooltip-with-close-delay
+WEBSITE_DIR=020-convert-text-to-link
 
 default: fmt js devserver
 godom: fmt domjs devserver

-Original file line number
+Diff line change
 +<!doctype html>
 +<html>
 +<head>
 +  <meta charset="utf-8">
 +  <title>Convert Text to Link in HTML</title>
 +</head>
 +<body>
++
 +<div class="line-block">
 +<div class="line">　　「世尊；眾祐」，南傳作「世尊」</div>
 +<div class="line">　　(bhagavā，音譯為「婆伽婆；婆伽梵；薄伽梵」，</div>
 +<div class="line">　　義譯為「有幸者」，古譯為「尊祐」)，</div>
 +<div class="line">　　菩提比丘長老英譯為「幸福者」(the Blessed One)。</div>
 +<div class="line">　　請參看〈世尊譯詞的探討〉。</div>
 +</div>
++
 +  <script src="app.js"></script>
 +</body>
 +</html>