[英]Javascript to html replace tags not working
我一直在努力替换我网站上发布的所有共享代码但不适合我。 我需要在<pre><code></code></pre>
出现的所有内容来重放所有标签并使用css为其赋予颜色。 如果有任何简单的方法可以做到这一点,有人可以帮助我吗? 我将欣赏jsfiled中的示例代码
这是我一直试图使用的代码示例
function Rep(text){
text = text.replace(/ /g," ");
text = text.replace(/<([^\>]+?)>/g, function(match, contents){
return "<span class='TagColor'><"+contents+"></span>";
}
);
text = text.replace(/\"([^\"]+?)\"/g, function(match, contents){
return '<span class="StringColor">"'+contents+'"</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">{</span>';
}
);
text = text.replace(/\}/g, function(match, contents){
return '<span class="BracketsColor">}</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,'<');
var text=text.replace(/>/g,'>');
$(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->prepare($query);
$stmt->execute($params);
</code></pre>
您应该尝试使用某些库,而不是尝试自己实现它。
在开始之前,有一些事情需要考虑。
<script>
标记中,任何其他标记都会强制浏览器解析可能导致修改代码的内容,如HTML
HTML
附加到容器中,而是将textNode
附加到与第一点相同的原因 我已经使用下面的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.