使用JavaScript查找替換HTML

Question

我讀過很多不同的文章，我不知道為什么這對我不起作用。 任何幫助將不勝感激。 我敢肯定這很簡單。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

    <script type="text/javascript">

    $("body").children().each(function() {
        $(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
    });

    </script>

</head>

<body>

    <div>HelloWorld®</div>

</body>
</html>

Answer 1

您必須在頁面准備就緒后等待，以便在$(document).ready(function(){....})內添加函數，或將<script>...</script>標記移動為<body>...</body>最后一個元素<body>...</body>

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div>HelloWorld®</div> <script type="text/javascript"> $("body").children().each(function() { $(this).html($(this).html().replace(/®/g,"<sup>®</sup>")); }); </script> </body> </html>

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("body").children().each(function() { $(this).html($(this).html().replace(/®/g,"<sup>®</sup>")); }); }); </script> </head> <body> <div>HelloWorld®</div> </body> </html>

Answer 2

我已經測試了您的代碼，並且對我有用。 在修改元素之前和之后，我將元素的內容輸出到控制台：

$("body").children().each(function() {

    console.log($(this).html());
    $(this).html($(this).html().replace(/®/g,"<sup>®</sup>"));
    console.log($(this).html());
});

結果是：

HelloWorld®
HelloWorld<sup>®</sup>

在這里檢查：

https://jsfiddle.net/m6kLgpj7/

您得到不同的結果嗎？ 您正在觀察的問題是什么？

Answer 3

老實說，我可能只是通過為其指定一個唯一的ID作為目標，而不是遍歷體內的每個元素。 但是，由於這是您詢問的方法，因此我將這樣做：

 $(document).ready(function() { $("body").children().each(function(idx, elem) { var newHtml = $(elem).html().replace(/®/g, "<sup>®</sup>"); $(elem).html(newHtml); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Untitled Document</title> <body> <div>HelloWorld®</div> </body>

我認為，當您使用每種方法提供的jQuery的第二個參數（元素）時，而不是在整個地方都使用“ this”時，會更清楚……只是我個人的喜好。

另外，請注意我放置了腳本其余部分以確保文檔准備就緒的方法。 這樣可以確保腳本在DOM准備就緒之前不會操縱DOM。

使用JavaScript查找替換HTML

問題描述

3 個解決方案

解決方案1
0 已采納 2016-10-21 15:55:29

解決方案2
0 2016-10-21 16:02:21

解決方案3
0 2016-10-21 16:05:59

使用JavaScript查找替換HTML

問題描述

3 個解決方案

解決方案1 0 已采納 2016-10-21 15:55:29

解決方案2 0 2016-10-21 16:02:21

解決方案3 0 2016-10-21 16:05:59

解決方案1
0 已采納 2016-10-21 15:55:29

解決方案2
0 2016-10-21 16:02:21

解決方案3
0 2016-10-21 16:05:59