Question

我有一个网页，如下所示：

<html>
  <body>
    <script src="http://www.website.com/123.js" ></script>
    <h1>123 is a great number!</h1>
    Everyone likes 123.
  </body>
<html>

如何使用JavaScript或jQuery将所有123实例替换为Pi。我希望一旦页面加载后立即发生这种情况。完全希望这看起来应该是这么简单。我感觉这是

的路线

<script>
$(document).ready(function() {
$('body').replace(/123/g, 'Pi');
});
</script>

但我不确定我哪里出错了。我已经简化了示例，以便包含显着的功能，如果有任何我可以添加的内容，请告诉我。

Answer 1

最安全的方法是走dom，只在文本节点上执行正则表达式：

var regex = /123/g,
    replacement = 'Pi';

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

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

这从一个根开始，递归调用子节点上的replaceText函数，这是使用contents()^[docs]方法获得的。

如果找到文本节点，则执行替换。

示例： http://jsfiddle.net/k6zjT/

Answer 2

<script>
$(document).ready(function() {
    $("body").html(String($('body').html()).replace(/123/g, 'Pi'));
});
</script>

Answer 3

这是一个完全纯粹的JavaScript解决方案，可以补充Patrick的答案。

//specify a start point
recurseDOM(document.body);

function recurseDOM(scope)
{
    var i = 0, nodes, node;
    if(scope.childNodes)
    {
        nodes = scope.childNodes;
        for(i;i<nodes.length;i++)
        {
            node = nodes[i];
            if(node.nodeType === 3)
            {
                //is a text node
                checkTextNode(node);    
            }
            if(node.childNodes)
            {
                //loop through child nodes if child nodes are found
                recurseDOM(node);
            }
            node = null;
        }
        nodes = null;
    }   
}

function checkTextNode(node)
{
    var newText = "is", patt = /is/g, text = node.data, test = patt.test(text);
    if(test)
    {
        //match found, replace node's textual data with specified string
        node.data = text.replace(patt, "__" + newText + "__");
        newText = null;
        text = null;
    }
    test = null;
}

为了好玩，这是沙箱中的代码：http://jsfiddle.net/mkmcdonald/th6bh/1/

如何替换匹配单词的HTML正文中的所有内容？

3 个答案: