4

ページ上の各アスタリスクを で囲む必要があります<span class="red"></span>。私が試したいくつかのことはうまくいきません。要するに、ページで特定の文字を検索する必要があるのですが、その方法がわかりません。

4

5 に答える 5

5

HTML 全体を置き換えない (非常に態度が悪い) ため、要素をすばやく操作できます。

var specialTags = ["script", "style"].join("|"),
    re = new RegExp("^(?:" + specialTags + ")$", "i");

for (var els = document.getElementsByTagName("*"), i = els.length; i--;) {
    var el = els[i];

    if (re.test(el.tagName))
        continue;

    for (var j = 0, childs = el.childNodes, lj = childs.length; j < lj; j++) {
        var child = childs[j];
        if (child.nodeType === 3 && child.nodeValue.indexOf("*") > -1) {
            var segments = child.nodeValue.split("*");
            for (var k = 0, lk = segments.length; k < lk; k++) {
                el.insertBefore(document.createTextNode(segments[k]), child);
                if (k < lk - 1) {
                    var span = document.createElement("span");
                    span.className = "red";
                    span.appendChild(document.createTextNode("*"));
                    el.insertBefore(span, child);
                }
            }
            el.removeChild(child);
        }
    }
}

これは jQuery を必要としない純粋な JavaScript であり、ここではあまり役に立ちません。

デモ: http://jsfiddle.net/T4ZXA/5/

于 2013-04-26T15:21:17.457 に答える
2

jQuery を使用しない場合は、少し高速になる可能性があり、ライブラリに依存しないことは間違いありません。

(function(str,e){
    var regex = new RegExp(str, 'gi');
    e.innerHTML = e.innerHTML.replace(regex, '<span class="red">*</span>');
})('*',document.body);
于 2013-04-26T15:11:39.910 に答える
2

これは少し汚れていて危険です (以下で説明します) が、次のことを試すことができます。

var allHTML = $("body").html();
allHTML = allHTML.replace(/\*/g, "<span class=\"red\">*</span>");
$("body").html(allHTML);

http://jsfiddle.net/6rDK4/

注: Dogbert が指摘したように、これは*HTML タグ内の文字 (ノード属性など) を置き換える可能性があります。

編集:ただし、これにより、体内にあるすべてのスクリプトが再接続される可能性があることに注意してください! bodyメインコンテナに置き換えてみてください。

EDIT2 : VisioN は、より精巧ですが、より安全なソリューションを投稿しました。

于 2013-04-26T15:03:42.710 に答える
1

これは機能し、タグの * を置き換えません。

http://jsfiddle.net/DR6Ca/2/

var text = $("body").find(":contains(*)").contents().filter(function() {
    //Don't include css or script tags, all other text nodes are fine.
  return this.nodeType == 3
      && ($(this).parent().get(0).tagName.toUpperCase() !== "SCRIPT") 
      && ($(this).parent().get(0).tagName.toUpperCase() !== "STYLE");
}).replaceWith(function() {
   return this.textContent.replace(/\*/g, "<span class=\"red\">*</span>");

この jsfiddle で他のコードをテストして、「こんにちは」を青のままにしているかどうかを確認できます。青のままでない場合は、バグがあります。

于 2013-04-26T15:35:58.900 に答える