用數組中的已解析HTML代替文本

我的數組包含70個wordpais像：

var wordMark = []; 
    wordMark[0] = ['mytext','<b>my</b>Text']; 
    wordMark[1] = ['anothertext','<b>another</b>Text']; 
    wordMark[2] = ['therealtext','Therealtext'];

我的功能如下：

// Schriftzüge ersetzen 
    function setWordMarks() { 
     //for(var wordMarkI=0; wordMarkI<=wordMark.length-1; wordMarkI++){ 
     for(var wordMarkI=0; wordMarkI<=5; wordMarkI++){ 

      //alert(wordMark[wordMarkI][0]); 

      $('body, body *') 
       .contents() 
       .filter(function() { 
        return this.nodeType == Node.TEXT_NODE 
         && this.nodeValue.toLowerCase().indexOf(wordMark[wordMarkI][0]) >= 0; 
       }).each(function() { 
        this.nodeValue = this.nodeValue.toLowerCase().replace(wordMark[wordMarkI][0], wordMark[wordMarkI][1]); 
       }); 
     }; 
    }

一般來說它是關於與標準的CI-文本替換文本部分。

我的問題是，B標籤ist沒有解析，但寫入明文。

我希望，我coult解釋我的問題，非常感謝你， Schmoozer

編輯：這裏是現場演示：

$(document).ready(function(){ 
 
     var wordMark = []; 
 
     wordMark[0] = ['mytext','<b>my</b>Text']; 
 
     wordMark[1] = ['anothertext','<b>another</b>Text']; 
 
     wordMark[2] = ['therealtext','therealText']; 
 
     
 

 
// Schriftzüge ersetzen 
 
function setWordMarks() { 
 
     
 
for(var wordMarkI=0; wordMarkI<=5; wordMarkI++){ 
 
    $('body, body *') 
 
    .contents() 
 
    .filter(function() { 
 
     return this.nodeType == Node.TEXT_NODE 
 
      && this.nodeValue.toLowerCase().indexOf(wordMark[wordMarkI][0]) >= 0; 
 
    }).each(function() { 
 
    this.nodeValue = this.nodeValue.toLowerCase().replace(wordMark[wordMarkI][0], wordMark[wordMarkI][1]); 
 
    }); 
 
    }; 
 
}; 
 
     
 
     
 
$('span.checkTheText').click(function(){ 
 
    setWordMarks(); 
 
    }); 
 
     
 
});

.checkTheText{ 
 
     display: block; 
 
     margin: 10px; 
 
     padding: 5px; 
 
     border: 1px solid red; 
 
     width: 100px; 
 
     }

<html> 
 
     <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
     </head> 
 
     
 
     <body> 
 
     <h2>This is myText</h2> 
 
     <div> some lorem ipsum like text including anothertext</div> 
 
     <div>No i add TheRealText to give all three examples</div> 
 
     
 
     <span class="checkTheText">Do the magic</span> 
 
     </body> 
 
    </html>

來源

2014-11-14 Schmoozer

你能編輯您的問題，包括現場演示（使用「堆棧段」按鈕，將一個用鉛筆，給人們帶來了一個編輯器），或者鏈接到其他地方的現場演示（例如[JS Fiddle]（http://jsfiddle.net/））？這樣我們就能感覺到正在發生的事情。 – 2014-11-14 13:10:45

@DavidThomas我插入代碼段。 – Schmoozer 2014-11-14 14:29:12

您可以使用正則表達式爲：

jQuery的

<script type="text/javascript"> 
    $(function() { 
     var wordMark = []; 
     wordMark[0] = ['mytext', '<b>my</b>Text']; 
     wordMark[1] = ['anothertext', '<b>another</b>Text']; 
     wordMark[2] = ['therealtext', 'Therealtext']; 
     var content = $('#content').html(); 
     for (i=0; i < wordMark.length; i++) { 
      var pattern = wordMark[i][0]; 
      var regExp = new RegExp(pattern, "i"); 
      content = content.replace(regExp, wordMark[i][1]); 
     } 
     $('#content').html(content); 

    }); 
</script>

HTML

<div id="content"> 
    This is mytext and there are anothertext so therealtext is ok. 
</div>

來源

2014-11-14 13:18:44 vaso123

問題不是替代，這與代碼工作正常。問題是，被替換的文本沒有被解析，所以我在頁面上的文本是'另一個文本'而不是**另一個**文本 – Schmoozer 2014-11-14 14:11:09

我不知道爲什麼。也許你應該用解析器解析這些文本。無論如何，我的工作。 – vaso123 2014-11-14 14:23:49

你的代碼在我的代碼中工作，但只替換wordMark [i] [0]的第一個外觀。在我的要求中，我應該提到，我至少有3次出現在陣列中的每一項。 – Schmoozer 2014-11-19 14:40:22

用數組中的已解析HTML代替文本

回答

相關問題