用Javascript替換dom中每個單詞的實例

Question

我想用我正在製作的一個chrome擴展進行解析，並用另一個單詞替換任何一個單詞的實例。這就是我不工作對我來說

function jamify() { 
    $("body").html().replace(/James/g,"Jamie"); 
} 

Answer 1

.html()的快速和相當髒的替代有幾個缺點。

• 它實際上將取代整個DOM結構，去除任何事件綁定，如果這些都沒有綁定「活」上的元素越往上層次
• 它將取代很多比你更可預期。 '詹姆斯'到'傑米'應該是安全的，但是當他們想要被命名爲'艾美獎'時，它可能會變得時髦，突然某些斜體文本被理清。

更好的方法是隻替換實際文本節點中的字符串，因爲jQuery不是（當前）問題上的標籤，我認爲香草javascript是一個合適的選項。

var walker = document.createTreeWalker(
 
    document.body, 
 
    NodeFilter.SHOW_TEXT, { 
 
    acceptNode: function(node) { 
 
     return NodeFilter.FILTER_ACCEPT; 
 
    } 
 
    }, 
 
    false 
 
); 
 

 
while (walker.nextNode()) { 
 
    walker.currentNode.data = walker.currentNode.data.replace(/James/g, 'Jamie'); 
 
}

<!-- James --> 
 
<div data-name="James" class="James"> 
 
    James 
 
</div>

這個例子將僅觸摸實際的文本元素（一個或多個），註釋和兩個屬性（data-name和class）將不會被替換，所以它仍然是安全的，有javascript和/或css指這些。

Answer 2

我展示它這種方式來表明你必須調用一些功能的HTML重置爲新更換的字符串

注意：這將消滅你已經連接了任何DOM事件之前替換

你可以通過嵌套調用縮短各成一體這一點，如果你想

function jamify() { 
 
    
 
    var str = $(".test").html(); 
 
    console.log('jamify', str); 
 
    str2 = str.replace(/James/g,"Jamie"); 
 
    $(".test").html(str2); 
 
    
 
    //to simplify it could be done this way too 
 
    //$(".test").html($(".test").html().replace(/James/g,"Jamie")) 
 
} 
 

 
$(document).ready(function(){ 
 
    //alert('ready'); 
 
    $('.inner').click(function(){console.log('inner click')}) 
 
    //Yea!, my click event is all good. 
 
    jamify(); 
 
    //Now all your inner click EVENT is broken so this is not good 
 
    //solution if there are any events attached in your DOM 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <p>James is here</p> 
 
    <div class="inner">this div is James</div> 
 
</div>

Answer 3

如果字是在的textContent你可以嘗試：

var all = document.querySelectorAll('.test') 
 
//using .test as a wrapper section, try using body in production as selector (in the snippets it breaks) 
 

 
all.forEach(x => x.textContent = x.textContent.replace(/James/gi, "Jamie")) 
 
// keep in mind forEach for nodes has limited support, tested in chrome

<div class="test"> 
 
    <p>James is here</p> 
 
    <div >this div is James</div> 
 
</div>