Question

我必须使用数组中的内容替换页面中的文本。

我的数组包含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-tag没有被解析但是用明文写成。

我希望，我可以解释我的问题，非常感谢你， Schmoozer

编辑：这是现场演示：

＆＃13;

$(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();
  });
      
});

＆＃13;

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

＆＃13;

    <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>

＆＃13;

Answer 1

您可以使用正则表达式：

<强>的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>

用数组中的已解析HTML替换文本

1 个答案: