Javascript到html替换标签不起作用

时间:2016-06-07 19:55:52

标签: javascript html css

我一直在努力替换我网站上发布的所有代码,但不适合我。 我需要<pre><code></code></pre>中出现的所有内容来重放所有标签并使用css为其赋予颜色。如果有任何简单的方法可以做到这一点,有人可以帮助我吗?我将欣赏jsfiled中的示例代码

这是我一直试图使用的代码示例

function Rep(text){
  text = text.replace(/ /g,"&nbsp;");

  text = text.replace(/<([^\>]+?)>/g, function(match, contents){
      return "<span class='TagColor'>&lt;"+contents+"&gt;</span>";
  }  
  );

  text = text.replace(/\"([^\"]+?)\"/g, function(match, contents){
      return '<span class="StringColor">&quot;'+contents+'&quot;</span>';
    }  
  );
  text = text.replace(/\(([^\)]+?)\)/g, function(match, contents){
      return '<span class="OptionsColor">('+contents+')</span>';
    }  
  );
  text = text.replace(/\n/g, function(match, contents){
      return '<br />';
  }  
  );
  text = text.replace(/\{/g, function(match, contents){
      return '<span class="BracketsColor">&#123;</span>';
  }
  );
  text = text.replace(/\}/g, function(match, contents){
      return '<span class="BracketsColor">&#125;</span>';
  }
  );
  text = text.replace(/\/\*([^\*]+?)\*\//g, function(match, contents){
      return "<span class='CommentColor'>/*"+contents+"*/</span>";
  }  
  );
    text = text.replace(/\[\](.*?)\[\/\]/g, function(match, contents){
      return '<span class="BBColor">'+contents+'</span>';
  }
  );
  return text;

}

//HTML replace
//==================================================
$('code').each(function(){
    var text=$(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    $(this).html(text);
});

//google-code-prettify
//==================================================
jQuery(window).load(function(){
    prettyPrint();
});

//Still on Text format                                                                                                                

var app = angular.module('codelab',[],['$interpolateProvider',
    function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
        }]);

app.directive('ngPrism',['$interpolate', function ($interpolate) {
        "use strict";
        return {
          restrict: 'E',
          template: '<pre id="Mpreditor" class="code code-codes language-javascript"><code ng-transclude="ng-transclude" class="language-javascript"> </code></pre>',
          replace:true,
          transclude:true
        };
    }]);

以下是代码在我的网站中的显示方式

    <pre id="Mpreditor" class="code code-codes language-javascript">
    <code ng-transclude="ng-transclude" class="language-javascript">    
<span>Hello</span>
You have to include the `%` signs in the `$params`, not in the query:

        $query = "SELECT * FROM tbl WHERE address LIKE ? OR address LIKE ?";
        $params = array("%$var1%", "%$var2%");
        $stmt = $handle-&gt;prepare($query);
        $stmt-&gt;execute($params);
        </code></pre>

1 个答案:

答案 0 :(得分:0)

不要试图自己实现它,而应该尝试使用一些库。

在开始之前,有一些事情需要考虑。

  1. 将您的实际代码存储在<script>标记中,任何其他代码都会强制浏览器解析可能导致修改代码的内容,例如HTML
  2. 请勿将代码作为HTML添加到容器中,但textNode的原因与第一点相同
  3. 我已经使用下面的https://highlightjs.org/usage/库实现了一个示例。

    	<html>
    	<head>
    		<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    		
    		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css">
    		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
    
    	<script class="testCode" type="text/code" lang="sql">
    	SELECT * FROM tbl WHERE address LIKE ? OR address LIKE ?
    	</script>
    
    	<script class="testCode" type="text/code" lang="html">
    	<html>
    	  <head>
    	  
    	  </head>
    	  <body>
    		<h1>Hello World!</h1>
    	  </body>
    	</html>
    	</script>
    
    	<script class="testCode" type="text/code" lang="java">
    	public class Test {
    		public static void main (String[] args) {
    			System.out.println("Hello World!");
    		}
    	}
    	</script>
    
    	</head>
    	<body>
    	<div id="codeContainer">
    	</div>
    
    	<script>
    		//create code blocks
    		var codes = $("script.testCode");
    		var container = $("#codeContainer");
    		
    		codes.each(function () {
    			var code = $(this);
    			var html = code.html();
    			var language = code.attr("lang");
    			var codeBlock = $("<pre><code class='" + language + "'></code></pre>");
    			codeBlock.find("code").text(html);
    			container.append(codeBlock);
    		});
    	</script>
    	<script>
    	hljs.initHighlightingOnLoad();
    	</script>
    
    
    	</body>
    	</html>