javascript - < 和 > 被 javascript 函数替换，需要它们保持原样

Question

我在我的博客上运行了一些 javascript，这是我从各种来源拼凑而成的。

一切都按预期工作，除了当我运行搜索时它正在改变 <和 > 到页面输出上的 < 和 > 导致数据呈现为 HTML，而不是从数据库中提取的内容，即实体。

例如，如果您只是浏览到 https://loopnova.com/blog/onion/post/114一切都是我想要的。但是，如果您运行搜索并调用 java 脚本，则会发生这种情况: https://loopnova.com/blog/onion/searchOneEleven?term=html%20entities

<script>
// escape by Colin Snover
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

function highlight(term, span_class, base) {
  if (!term) return;
  base = base || document.body;
  var re = new RegExp("(" + RegExp.escape(term) + ")", "gi");
  var replacement = "<span class='" + span_class + "'>" + "$&" + "</span>"; //rp chnged term to "$&" because then it keeps the original case, rather than changing it to the case of the search term
  $("*", base).contents().each( function(i, el) {
    if (el.nodeType === 3) {
      var data = el.data;
      if (data = data.replace(re, replacement)) {
        var wrapper = $("<span>").html(data);
        $(el).before(wrapper.contents()).remove();
      }
    }
  });
}

function dehighlight(term, base) {
  var text = document.createTextNode(term);
  $('span.highlight', base).each(function () {
    this.parentNode.replaceChild(text.cloneNode(false), this);
  });
}


<?php
    $highlight = 0;
    $terms = explode(' ', $this->input->get('term'));
    foreach($terms as $term) { 
    $css_hightlight_class = "highlight".$highlight;
?>
highlight("<?php echo $term;?>", "<?php echo $css_hightlight_class;?>");
//dehighlight("the");
<?php
    $highlight++;
    }   
?>
</script>      

可能无关紧要，但如果有帮助，这里是页面的 php 部分:

<?php                                                                                                                                                                                                                                        
    foreach($articles->result() as $row) {
        echo '<div id="container">';
            $newline_markers = array("\n");
            trim($row->ramble);
            $formatted= str_replace($newline_markers,'<br>',$row->ramble);
            $formatted =  html_entity_decode($formatted); //as set_value() CI function converts input to html entities so it does not work on output
            $formatted = str_replace('  ', '&nbsp;&nbsp;', $formatted); //if we see a double space, asume it's for a reason and make it appear a double using html
            echo '<h1><a style="text-decoration: none; color: #4F5155" href="'.base_url().'blog/onion/post/'.$row->id.'">'."Captain's Log ".$row->datetime.'</a></h1>
            <div id="body">'.
            $formatted.'<br><br>';
            if($this->session->userdata('user_name') == "rick111") {
                echo '<a href="'.base_url().'blog/removeFromPublic/'.$row->id.'">x</a>';
            } 
            echo '</div>
        </div>';

    }
    if(isset($pagination)){
        echo '<div id="pagination">'.$this->pagination->create_links().'</div>';
    }
?>

Answer 1

当你从元素中获取数据时，html实体已经转换为char。设置包装器 html 时突出显示功能的问题。

尝试

  var data = el.data.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  if (data = data.replace(re, replacement)) {
    var wrapper = $("<span>").html(data);
    $(el).before(wrapper.contents()).remove();
  }

或者只使用 $(el).text() 而不是 $(el).html()