Δημοσιεύτηκε: 05 Δεκ 2011, 17:25
@the_eye:
Έφτιαξα ένα javascript, αντίστοιχο του forum tip, με τη βοήθεια του jquery και ενός highlight plugin.
Δεν αλλάζει τα anchor href, δεν πειράζει τους τίτλους, ούτε τις υπογραφές.
Αλλάζει μόνο το κείμενο μέσα στο div class="content" (δηλαδή το κείμενο σε θεματα και απαντήσεις στο φόρουμ).
Όλο το javascript μπαίνει μέσα στο <head>:
Η λίστα με τις λέξεις και τις επεξηγήσεις μπαίνει στο abbrlist (τρίτο script):
Παράδειγμα test.html
Έφτιαξα ένα javascript, αντίστοιχο του forum tip, με τη βοήθεια του jquery και ενός highlight plugin.
Δεν αλλάζει τα anchor href, δεν πειράζει τους τίτλους, ούτε τις υπογραφές.
Αλλάζει μόνο το κείμενο μέσα στο div class="content" (δηλαδή το κείμενο σε θεματα και απαντήσεις στο φόρουμ).
Όλο το javascript μπαίνει μέσα στο <head>:
- Κώδικας: Επιλογή όλων
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/*
* Modified by Savvas Radevic (medigeek) for the ubuntu-gr community.
* Copyright (c) 2011 Savvas Radevic <vicedar@gmail.com>
*
* jQuery Highlight plugin
* http://bartaz.github.com/sandbox.js/jquery.highlight.html
*
* Based on highlight v3 by Johann Burkard
* http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
*
* Copyright (c) 2009 Bartek Szopka
*
* Licensed under MIT license.
*/
jQuery.extend({
highlight: function (node, re, nodeName, className, abbrtitle) {
if (node.nodeType === 3) {
var match = node.data.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'abbr');
highlight.className = className || 'abbrdone';
highlight.setAttribute('title', abbrtitle); //Added abbr attribute: title
var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
!(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName, className, abbrtitle);
}
}
return 0;
}
});
jQuery.fn.highlight = function (words, options) {
var settings = { className: 'abbrdone', element: 'abbr', caseSensitive: false, wordsOnly: false };
jQuery.extend(settings, options);
if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i){
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) { return this; };
if (settings.abbrtitle.length == 0) { return this; }; // abbrtitle should be filled in
var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
return this.each(function () {
jQuery.highlight(this, re, settings.element, settings.className, settings.abbrtitle);
});
};
</script>
<script type="text/javascript">
$(document).ready(function() {
var abbrlist = {
"unity": "This is another test",
"test": "This is a test",
};
for (x in abbrlist) {
$('.content').highlight(x, {abbrtitle: abbrlist[x]});
};
});
</script>
Η λίστα με τις λέξεις και τις επεξηγήσεις μπαίνει στο abbrlist (τρίτο script):
- Κώδικας: Επιλογή όλων
var abbrlist = {
"unity": "This is another test",
"test": "This is a test",
};
Παράδειγμα test.html
- Κώδικας: Επιλογή όλων
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/*
* Modified by Savvas Radevic (medigeek) for the ubuntu-gr community.
* Copyright (c) 2011 Savvas Radevic <vicedar@gmail.com>
*
* jQuery Highlight plugin
* http://bartaz.github.com/sandbox.js/jquery.highlight.html
*
* Based on highlight v3 by Johann Burkard
* http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
*
* Copyright (c) 2009 Bartek Szopka
*
* Licensed under MIT license.
*/
jQuery.extend({
highlight: function (node, re, nodeName, className, abbrtitle) {
if (node.nodeType === 3) {
var match = node.data.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'abbr');
highlight.className = className || 'abbrdone';
highlight.setAttribute('title', abbrtitle); //Added abbr attribute: title
var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
!(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName, className, abbrtitle);
}
}
return 0;
}
});
jQuery.fn.highlight = function (words, options) {
var settings = { className: 'abbrdone', element: 'abbr', caseSensitive: false, wordsOnly: false };
jQuery.extend(settings, options);
if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i){
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) { return this; };
if (settings.abbrtitle.length == 0) { return this; }; // abbrtitle should be filled in
var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
return this.each(function () {
jQuery.highlight(this, re, settings.element, settings.className, settings.abbrtitle);
});
};
</script>
<script type="text/javascript">
$(document).ready(function() {
var abbrlist = {
"unity": "This is another test",
"test": "This is a test",
};
for (x in abbrlist) {
$('.content').highlight(x, {abbrtitle: abbrlist[x]});
};
});
</script>
<style type="text/css">
abbr {
color: purple !important;
background-color: #D8DA3D !important;
cursor:help !important;
}
</style>
</head>
<body>
<div>
<p>test my root </p>
<p>test my <a href="http://www.example.com/unity"> unity </a></p>
<abbr title="testing!">testing</abbr>
<div class="content">Hello world! test test2 <a href="#test">test 3 test3</a></div>
<div class="content"><b>test unity.</b><a href="www.unity.com/1-unity">unity2 unity 3 unity.</a></div>
</div>
</body>
</html>