12

jQueryまたはプレーンJavascriptを使用してページ上の数字を見つける方法があるかどうか疑問に思っています.

これが私がやりたいことです：

ページに「6 月 23 日」があるとします。私がやりたいことは、いくつかの<span>セレクターを数値の前に追加したり追加したりできるようにすることです。

:contains()jQuery で使用すると、数値だけでなく全体が選択されます。

これらの文字列は、私が取り組んでいる Wordpress テーマによってラッピング要素なしで生成されており、 number のみを選択したいです。

どんな助けでも大歓迎です！それについて考えてくれてありがとう。
-ジョージ

4

4 に答える 4

12

テキストノードを見て、番号がラップされた更新されたコンテンツに置き換えることで、すべての要素を調べることができます。

var regex = /(\d+)/,
    replacement = '<span>$1</span>';

function replaceText(el) {
    if (el.nodeType === 3) {
        if (regex.test(el.data)) {
            var temp_div = document.createElement('div');
            temp_div.innerHTML = el.data.replace(regex, replacement);
            var nodes = temp_div.childNodes;
            while (nodes[0]) {
                el.parentNode.insertBefore(nodes[0],el);
            }
            el.parentNode.removeChild(el);
        }
    } else if (el.nodeType === 1) {
        for (var i = 0; i < el.childNodes.length; i++) {
            replaceText(el.childNodes[i]);
        }
    }
}

replaceText(document.body);

例: http://jsfiddle.net/JVsM4/

これにより、既存の要素や関連する jQuery データが損傷を受けることはありません。

編集:少しjQueryを使用して少し短くすることができます:

var regex = /(\d+)/g,
    replacement = '<span>$1</span>';

function replaceText(i,el) {
    if (el.nodeType === 3) {
        if (regex.test(el.data)) {
            $(el).replaceWith(el.data.replace(regex, replacement));
        }
    } else {
        $(el).contents().each( replaceText );
    }
}

$('body').each( replaceText );

例: http://jsfiddle.net/JVsM4/1/

正規表現にはgグローバル修飾子が必要であることに注意してください。

おそらくこの方法では少し遅くなるので、DOM が非常に大きい場合は、jQuery 以外のバージョンを使用します。

于 2011-06-25T22:27:31.150 に答える
1

大声で考えているだけですが、これでうまくいくと思いますか?

document.body.innerHTML = document.body.innerHTML.replace(/(\d+)/g, "<span class='number'>$1</span>")
于 2011-06-25T22:22:53.793 に答える
0

日付の形式に完全に依存します。

このウェブサイトにはさまざまな正規表現が含まれていることがわかりました (通常のテキストから日付を検索しているだけなので)。

これが日付の形式 (dd MMM yyyy) である場合、これは良いオプションのようです: http://regexlib.com/REDetails.aspx?regexp_id=405

これはテンプレートなので、日付はすべてのページで同じになると思います。したがって、フォーマットも同じになります。適切に定義すれば、テンプレートのすべてのテキストで正規表現を使用できます。

于 2011-06-25T22:17:12.163 に答える