Created
August 1, 2010 17:19
-
-
Save noomz/503545 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Word to Link mapping</title> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> | |
</head> | |
<body> | |
<table id="mapping"> | |
<tr> | |
<td>bangkok</td> | |
<td>http://wikipedia.org/wiki/Thailand</td> | |
</tr> | |
<tr> | |
<td>Pakistan</td> | |
<td>http://wikipedia.org/wiki/Pakistan</td> | |
</tr> | |
<tr> | |
<td>Britain</td> | |
<td>http://wikipedia.org/wiki/England</td> | |
</tr> | |
<tr> | |
<td>India</td> | |
<td>http://wikipedia.org/wiki/India</td> | |
</tr> | |
<tr> | |
<td>London</td> | |
<td>http://wikipedia.org/wiki/London</td> | |
</tr> | |
</table> | |
<div class="news"> | |
Pakistan attempted to calm its diplomatic fallout with Britain by confirming that President Zardari would go ahead with a planned trip to meet David Cameron, despite anger over the Prime Minister’s comments that the country was “exporting terror”. Mr Zardari was under domestic pressure to cancel the trip after fury over Mr Cameron’s comments - made during last week’s visit to India - which have already led Pakistan’s powerful Inter-Services Intelligence (ISI) agency to cancel talks with British security officials in London. Opposition politicians in Pakistan had urged Mr Zardari to call off his trip, while demonstrators burnt an effigy of the Prime Minister on the streets of Karachi | |
</div> | |
<script type="text/javascript"> | |
/** | |
* WordLink plugin for jQuery. | |
*/ | |
(function ($) { | |
$.fn.extend({ | |
wordLink: function (words) { | |
var words = words || []; | |
if (words.length == 0) { | |
return this; | |
} | |
return this.each(function () { | |
var regexp = []; | |
$.each(words, function (word, link) { | |
/** | |
* Prevent existing link to be changed | |
* use javascript negative lookbehind | |
* @see http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript | |
*/ | |
regexp.push('(<a [^>]*>[^<>]*?)?' + word); | |
words[word] = '<a href="' + link + '" title="' + link + '">' + word + '</a>'; | |
}); | |
regexp = new RegExp(regexp.join('|'), 'g'); | |
// Use replace function callback. | |
// @see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/String/replace | |
var new_content = $(this).html().replace(regexp, function (str) { | |
// @see http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript | |
if (words[str] == undefined) { | |
return str; | |
} | |
else { | |
return words[str]; | |
} | |
}); | |
$(this).html(new_content); | |
}); | |
} | |
}) | |
})(jQuery); | |
</script> | |
<script type="text/javascript"> | |
var words = {}; | |
$("#mapping tr").each(function () { | |
var | |
word = $('td:eq(0)', this).text(), | |
link = $('td:eq(1)', this).text(); | |
words[word] = link; | |
}); | |
$('.news').wordLink(words); | |
</script> | |
</body> | |
</html> |
น้องหนุ่มลองฝึก เขียน regexp แบบเขาดูนะ ตรงที่เขา lookahead เพื่อตรวจสอบว่าเป็นคำที่อยู่ใน link อยู่แล้วหรือเปล่า, ลองไม่ดู code แล้วเขียนดู
- เรื่อง replace callback คิดว่าได้ครับ จากเว็บของ mozilla แล้วเขาไม่ได้บอกว่ามันเป็น on-standard
- เรื่อง regexp พอดียังอ่านไม่จบ อ่านได้แค่ช่วงแรกก็เอามาใช้เลย เพิ่งเห็นว่ามีอีกหลายวิธีครับ
ห้ามตอบแบบไม่แน่นอน คำตอบควรเป็น ได้ หรือ ไม่ได้ อะไรได้หรืออะไรไม่ได้บ้าง (ไม่ต้อง list ทุกตัว เอาแค่ตัวยอดนิยมก็พอ)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
browser ตัวอื่นๆ support replace แบบ callback ไช่ไหม?