私は Web 開発に関してはほとんど初心者なので (一般的なプログラミングではありません)、間違った用語があればご容赦ください。
HTML ページに追加されたときに、ページ内の各ヘブライ語の単語を検出し、その単語を HTML 要素 (タイトル付きのハイパーリンクなど) に変換するスクリプトを作成したいと考えています。
したがって、次のようになります。
<p>ראש הלשכה</p>
次のように変換されます。
<p><a title="word 1" href="#">הלשכה</a> <a title="word 2" href="#">ראש</a></p>
わかる？
したがって、最初の仕事はページ内のヘブライ語を検出することだと思います。どうすればこれを行うことができますか？jQueryのドキュメントをいじる以外に、どこから始めればよいかわかりません。
文字列内のヘブライ語の検索は非常に簡単です。ヘブライ語のコードポイントの連続したシーケンスに一致する正規表現を使用します。
/[\u05D0-\u05FF]+/
JSは関数型プログラミングをサポートしているため、各テキストノードで関数を呼び出して、ドキュメントツリーをウォークする独自の関数を簡単に作成できます。まず、足場を少し。
if (! window.assert) {
window.dbgLvl = 1; // change this to 0 for production release
window.assert=function(succeeded, msg) {
if (dbgLvl && !succeeded) {
if (!msg) msg = 'assertion failed';
throw msg;
}
}
}
次に、出力に区切り文字を含めて、文字列を配列に分割するメソッドを定義します。
/* String.separate is like String.split, but the result includes the
separators.
These implementations of 'String.separate' will work for our purposes,
but are buggy in general, due to differences in the implementation of
String.split.
The two misbehaviors we correct are including neither grouped patterns
nor empty strings in the result, though the latter is only corrected
when the missing empty string is at the start or the end.
*/
if ('-'.split(/(-)/).length & 1) {
assert('a'.split(/a/).length, 'split includes grouping but not empty strings');
// split includes groups in result
String.prototype.separate = function (separator) {
if (typeof separator == 'string') {
if (separator.charAt(0) != '('
|| separator.charAt(separator.length-1) != ')')
{
separator = new RegExp('(' + separator + ')', 'g');
} else {
separator = new RegExp(separator, 'g');
}
}
return this.split(separator);
}
} else {
if ('a'.split(/a/).length) {
// empty strings included, grouped aren't
String.prototype.separate = function (separator) {
if (typeof separator == 'string') {
separator = new RegExp(separator, 'g');
}
var fence = this.match(separator);
if (!fence) {
return [this];
}
var posts = this.split(separator);
assert(posts.length = fence.length+1);
var result = [], i;
for (i=0; i<fence.length; ++i) {
result.push(posts[i]);
result.push(fence[i]);
}
result.push(posts[i]);
return result;
}
} else {
// neither empty strings nor groups are included. IE, you suck.
String.prototype.separate = function (separator) {
if (typeof separator == 'string') {
separator = new RegExp(separator, 'g');
}
var fence = this.match(separator);
if (!fence) {
return [this];
}
var posts = this.split(separator);
if (posts.length <= fence.length) {
/* missing some posts. Assume that they are the first or
last, though this won't be true in general.
*/
if (posts.length < fence.length) {
posts.unshift('');
posts.push('');
} else {
if (this.substring(0, fence[0].length) == fence[0]) {
posts.unshift('');
} else {
posts.push('');
}
}
}
var result = [], i;
for (i=0; i<fence.length; ++i) {
result.push(posts[i]);
result.push(fence[i]);
}
result.push(posts[i]);
return result;
}
}
}
次に、いくつかのノード述語。
if (! window.Node) {
window.Node={TEXT_NODE: 3};
} else if (typeof Node.TEXT_NODE == 'undefined') {
Node.TEXT_NODE = 3;
}
function isTextNode(node) {return node.nodeType == Node.TEXT_NODE;}
function hasKids(node) {return node.childNodes && node.childNodes.length;}
function allNodes(node) {return true;}
これで、DOMをウォークする関数が表示されます。
/*
forEachChild: pre-order traversal of document tree. Applies a function to some nodes, determined by the 'which' and 'descendInto' arguments.
Arguments:
which (function): Returns true if 'action' should be applied to a node.
action (function): Takes a node and does something to it.
parent (Node): The node to start from.
descendInto (function, optional): By default, forEachChild will descend into every child that itself has children. Place additional restrictions by passing this argument.
*/
var forEachChild = (function() {
/* the actual implementation is made a local function so that the
optional parameter can be handled efficiently.
*/
function _forEachChild(which, action, node, descendInto) {
for (var child=node.firstChild; child; child=child.nextSibling) {
if (which(child)) {
action(child);
}
if (hasKids(child) && descendInto(child)) {
_forEachChild(which, action, child, descendInto);
}
}
}
return function (which, action, node, descendInto) {
if (!descendInto) {descendInto=allNodes}
_forEachChild(which, action, node, descendInto);
}
})();
function forEachNode(which, action, descendInto) {
return forEachChild(which, action, document, descendInto);
}
function forEachTextNode(action, descendInto) {
return forEachNode(isTextNode, action, descendInto);
}
function forEachTextNodeInBody(action, descendInto) {
return forEachChild(isTextNode, action, document.body, descendInto);
}
関数の最後のグループは、パターンを選択した新しいノードと一致するテキストノードのテキストを置き換えます。このグループ（まあ、によって返される関数wrapText）は、テキストの方向を適切に処理するかどうかなど、ブラウザー間の互換性について完全にはテストされていません。
/*
wrapText replaces substrings in a text node with new nodes.
Arguments:
pattern (RegExp || string): If a RegExp, must be of the form: '/(...)/g'.
replace (function): Takes a string and returns a Node to replace the string.
Returns a function that takes a text node.
*/
function wrapText(pattern, replace) {
return function (node) {
var chunks = node.nodeValue.separate(pattern);
if (chunks.length < 2)
return;
var wordCount=0;
var fragment = document.createDocumentFragment();
var i;
// don't bother adding first chunk if it's empty.
if (chunks[0].length) {
fragment.appendChild(document.createTextNode(chunks[0]));
}
for (i=1; i < chunks.length; i+=2) {
fragment.appendChild(replace(chunks[i])); // †
fragment.appendChild(document.createTextNode(chunks[i+1])); // ‡
}
// clean-up
assert(i == chunks.length, 'even number of chunks in ['+chunks+'] when it should be odd.');
/* chunks.length and i will always be odd, thus i == chunks.length
* when the loop finishes. This means the last element is never
* missed.
* Here's another way of thinking about this. Since the last
* (and first) chunk won't match the pattern, it won't be
* processed by the line †. The penultimate chunk, however, does
* match. Assuming the loop condition is correct,the penultimate
* chunk must be processed by †, hence the last chunk is
* processed by ‡.
*/
if (! chunks[i-1].length) {
// last chunk is empty; remove it.
fragment.removeChild(fragment.lastChild);
}
node.parentNode.replaceChild(fragment, node);
}
}
/*
createAnchorWrap wraps a string in an anchor node. createAnchorWrap also
sets the title of the anchor.
Arguments:
title (string || function, optional): The title for the anchor element.
If title is a function, it's called with the string to wrap. If
title is a string, wrapper will use a word counter for the title
function.
Returns a function that takes a string and returns an anchor element.
*/
function createAnchorWrap(title) {
if (typeof title == 'string') {
title=createWordCounter(title);
} else if (!title) {
title=createWordCounter();
}
return function(word) {
var a = document.createElement('a');
a.title=title(word);
a.appendChild(document.createTextNode(word));
return a;
}
}
/*
createWordCounter creates a word counter, which returns the number of
times it's been called (including the current call), prefixed by a string.
Arguments:
pre (string, optional): prefix for return value.
Returns a function that takes a string (ignored) and returns a string.
*/
function createWordCounter(pre) {
var wordCount=0;
if (pre) {
pre = pre.replace(/ *$/, ' ');
} else {
pre = 'word ';
}
return function(text) {
return pre + wordCount;
}
}
あなたがしなければならない最後のことは、（例えば）ページの下部にあるロードハンドラーまたはスクリプトでプロセスを開始することです。
forEachTextNodeInBody(wrapText(/([\u05D0-\u05FF]+)/g,
createAnchorWrap()));
タイトルのプレフィックスを変更する場合は、の結果をに渡しcreateWordCounter(...) ますcreateAnchorWrap。