3

表示されるすべてのテキストを「@@@@」のようなものに置き換えたい。これは、すべてのページがテキストではなく「@@@@」でいっぱいであることがユーザーに表示されることを意味します (画像、iframe、またはページの HTML コードに存在しないものを除く)。

これは、ページの html コードをほぼ置き換えますが、タグやコードには影響せず、ユーザーに表示されるテキストだけです。

たとえば、このページのすべてのテキストを置き換えたい:

<!DOCTYPE html>
<html>
<body>                  
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<table>
<tr>
    <td>Username</td>
</tr>
<tr>
    <td>Password</td>
</tr>
</table>
<p>
  <input type="checkbox" name="remember" tabindex=3 />
  <label for="checkbox">Remember <strong>password</strong></label>
</p>
<p>Click here to <a href='register.php'>Register</a></p>
</body>
</html>

結果は次のようになります。

<!DOCTYPE html>
<html>
<body>                  
<ul class="topnav">
    <li>@@@@</li>
    <li>@@@@ 
        <ul><li>@@@@</li><li>@@@@</li><li>@@@@</li></ul>
       </li>
    <li>@@@@</li>
</ul>
<div>@@@@</div>
<div>@@@@</div>
<span>@@@@</span>
<table>
<tr>
    <td>@@@@</td>
</tr>
<tr>
    <td>@@@@</td>
</tr>
</table>
<p>
  <input type="checkbox" name="remember" tabindex=3 />
  <label for="checkbox">@@@@<strong>@@@@</strong></label>
</p>
<p>@@@@<a href='register.php'>@@@@</a></p>
</body>
</html>

私が試したいくつか：

JQuery を使用して、プレーン テキストのみを含むすべての要素、タグ (およびその子) を置き換えます。これは最初は問題なく機能します。

<ul class="topnav">
    <li>@@@@</li>
    <li>@@@@ 
        <ul><li>@@@@</li><li>@@@@</li><li>@@@@</li></ul>
       </li>
    <li>@@@@</li>
</ul>
<div>@@@@</div>
<div>@@@@</div>
<span>@@@@</span>

しかし最近、要素の場合、タグに子があり、失敗することに気付きました:

<p>
  <input type="checkbox" name="remember" tabindex=3 />
  <label for="checkbox">Remember <strong>password</strong></label>
</p>
<p>Click here to <a href='register.php'>Register</a></p>

そこで、document.body.innerText を使用してすべてのテキストを選択する別の方法を試しましたが、HTML 形式は失われます。

私はとても疲れていた。誰かが私を助けることができますか？

どうもありがとう！

4

4 に答える 4

9

このコードは私にとってはうまくいくようです：

$('*').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
    this.nodeValue = '@@@@';
});

基本的に、各テキストノードの内容を に置き換えます@@@@。

デモについては、こちらを参照してください: http://jsfiddle.net/K8544/3/

于 2012-06-23T06:20:27.880 に答える
1

2 つのタグ間で任意のものを一致させることができます。これらは同じタグである必要はありません。たとえば、<div>aaa<a href="bbb">ccc dd</a></div>を見つけてaaaに置き換え、と次の の間を探してを@@@見つけccc ddて に置き換えます。@@@ @@><

<script type="text/javascript">
function obscure() {
    var newhtml = document.body.innerHTML.split("<");
    for (var i=1; i<newhtml.length; i++) {
        var list = newhtml[i].split(">");
        newhtml[i] = (list[0]) + ">" + ((list[1]).replace(/[^@\s]/gim, "@"));
    }
    newhtml[0] = (newhtml[0].replace(/[^@\s]/gim, "@"));
    document.body.innerHTML = newhtml.join("<");
}
</script>

(注: いくつかの問題を引き起こしているように見えるため、これは空白を置き換えるものではありません)。

于 2012-06-24T03:33:21.703 に答える
1

これを試してみてください。内部テキストを " * " に置き換える関数ですが、内部 HTML が内部テキストと等しい場合に限ります。それ以外の場合は、再帰的に自分自身を呼び出し、最も内側の要素に到達するまで DOM を下に移動します。

    $(document).ready(function() {
        function replaceChildren(node) {
            if ($(node).html() == $(node).text()) $(node).text("@@@@");
            else {
                $(node).children().each(function() {
                    replaceChildren(this);
                });
            }
        }
        replaceChildren($("body"));
    });

完璧ではありませんが、ほとんどの目的にかなり近いはずです。Stack Overflow ページで試してみたところ、ほとんどのテキストが置き換えられました。機能しない唯一の場所は、同じタグ内に不要なマークアップとテキストがある場所です。たとえば、<div>Here is some inner text <strong>and markup</strong></div>です。多分これはあなたの目的には十分です...

于 2012-06-23T06:20:59.557 に答える
1

JQuery のみのソリューション:

$("body *").contents().wrap("<obscure></obscure>");
$("obscure").each(function(i,e) {if ($(e).children().length==0) $(e).replaceWith("@@@@");}​);
$("obscure > *").unwrap();

http://jsfiddle.net/cranio/CW9jY/1/

このコードは、すべてのノードをカスタム タグ ( obscure) でラップします。を使用すると.contents()、純粋なテキスト ノードも確実にラップされます。次にobscure、子を持たないノード (以前はテキストのみのノード) を @@@@ に置き換え、obscureタグも削除します。最後に、 でラップされた他の要素をアンラップし<obscure>ます。

于 2012-06-23T06:29:54.227 に答える