[英]javascript regex replace expressions found with themselves within tags
I have a form where a user can enter in some code, and then I want to use Javascript to display it back to them in the webpage. 我有一个表单,用户可以在其中输入一些代码,然后我想使用Javascript将其显示回网页中。 I've already used regex in javascript to replace all the < > tags with html keywords < and >, but I want to highlight in blue all instances of a tag being opened and then ending with a space or a close tag.
我已经在javascript中使用了正则表达式,用html关键字&lt和&gt替换了所有<>标签,但是我想用蓝色突出显示正在打开的标签的所有实例,然后以空格或关闭标签结束。 I can find the expressions I want but I then want to surround each of them with < span> tags.
我可以找到所需的表达式,但随后要用<span>标记将它们包围起来。
The actual code is long but Here's some example code that covers what I want to do: 实际的代码很长,但是这里有一些示例代码涵盖了我想做的事情:
//example of what a user might put in
var text = "<div id='main'>Here is some <b>bold</b> text.</div>";
//Replace all tag symbols with html keywords
text = text.replace(/\r?</g,'<');
//now the expression to get what i want to highlight blue
var regExp = /\<[a-zA-Z]+(\s|>)/g;
And now I want to find the expressions, and replace them all with themselves wrapped inside span tags, like: 现在,我想查找这些表达式,并将它们全部替换成包裹在span标签中的自身,例如:
text = text.replace(regExp,"<span class='bluefont'>EACH EXPRESSION FOUND</span>");
I don't know how to do this or if it's even possible just using replace, but it would be really handy if it is. 我不知道如何执行此操作,或者即使仅使用replace也不可能,但是如果这样做,它将非常方便。
I know there are external libraries for syntax highlighting but I don't want to use any external libraries for this. 我知道有用于语法高亮显示的外部库,但我不想为此使用任何外部库。 I'm using [a-zA-Z] instead of checking for legal tag names in html because I want this to work for xml/xhtml too.
我使用[a-zA-Z]而不是检查html中的合法标签名称,因为我也希望它也适用于xml / xhtml。
There is a simple solution - replace all < and > with entites, next use regexp (\\<[a-zA-Z]*\\>)
. 有一个简单的解决方案-将所有<和>替换为实体,然后使用regexp
(\\<[a-zA-Z]*\\>)
。 But to be exact I would use something else for first replacement, like below. 但确切地说,我将使用其他东西进行首次替换,如下所示。
markedString = htmlentities('My cat is <span>fluffy</span>')
markedString = markedString.replace(new RegExp('(\<[a-zA-Z]*\>)', 'g'), '<span class="marked">$1</span>');
function htmlentities (string, quote_style, charset, double_encode) {
var hash_map = this.get_html_translation_table('HTML_ENTITIES', quote_style),
symbol = '';
string = string == null ? '' : string + '';
if (!hash_map) {
return false;
}
if (quote_style && quote_style === 'ENT_QUOTES') {
hash_map["'"] = ''';
}
if (!!double_encode || double_encode == null) {
for (symbol in hash_map) {
if (hash_map.hasOwnProperty(symbol)) {
string = string.split(symbol).join(hash_map[symbol]);
}
}
} else {
string = string.replace(/([\s\S]*?)(&(?:#\d+|#x[\da-f]+|[a-zA-Z][\da-z]*);|$)/g, function (ignore, text, entity) {
for (symbol in hash_map) {
if (hash_map.hasOwnProperty(symbol)) {
text = text.split(symbol).join(hash_map[symbol]);
}
}
return text + entity;
});
}
return string;
}
function get_html_translation_table (table, quote_style) {
var entities = {},
hash_map = {},
decimal;
var constMappingTable = {},
constMappingQuoteStyle = {};
var useTable = {},
useQuoteStyle = {};
// Translate arguments
constMappingTable[0] = 'HTML_SPECIALCHARS';
constMappingTable[1] = 'HTML_ENTITIES';
constMappingQuoteStyle[0] = 'ENT_NOQUOTES';
constMappingQuoteStyle[2] = 'ENT_COMPAT';
constMappingQuoteStyle[3] = 'ENT_QUOTES';
useTable = !isNaN(table) ? constMappingTable[table] : table ? table.toUpperCase() : 'HTML_SPECIALCHARS';
useQuoteStyle = !isNaN(quote_style) ? constMappingQuoteStyle[quote_style] : quote_style ? quote_style.toUpperCase() : 'ENT_COMPAT';
if (useTable !== 'HTML_SPECIALCHARS' && useTable !== 'HTML_ENTITIES') {
throw new Error("Table: " + useTable + ' not supported');
// return false;
}
entities['38'] = '&';
if (useTable === 'HTML_ENTITIES') {
entities['160'] = ' ';
entities['161'] = '¡';
entities['162'] = '¢';
entities['163'] = '£';
entities['164'] = '¤';
entities['165'] = '¥';
entities['166'] = '¦';
entities['167'] = '§';
entities['168'] = '¨';
entities['169'] = '©';
entities['170'] = 'ª';
entities['171'] = '«';
entities['172'] = '¬';
entities['173'] = '­';
entities['174'] = '®';
entities['175'] = '¯';
entities['176'] = '°';
entities['177'] = '±';
entities['178'] = '²';
entities['179'] = '³';
entities['180'] = '´';
entities['181'] = 'µ';
entities['182'] = '¶';
entities['183'] = '·';
entities['184'] = '¸';
entities['185'] = '¹';
entities['186'] = 'º';
entities['187'] = '»';
entities['188'] = '¼';
entities['189'] = '½';
entities['190'] = '¾';
entities['191'] = '¿';
entities['192'] = 'À';
entities['193'] = 'Á';
entities['194'] = 'Â';
entities['195'] = 'Ã';
entities['196'] = 'Ä';
entities['197'] = 'Å';
entities['198'] = 'Æ';
entities['199'] = 'Ç';
entities['200'] = 'È';
entities['201'] = 'É';
entities['202'] = 'Ê';
entities['203'] = 'Ë';
entities['204'] = 'Ì';
entities['205'] = 'Í';
entities['206'] = 'Î';
entities['207'] = 'Ï';
entities['208'] = 'Ð';
entities['209'] = 'Ñ';
entities['210'] = 'Ò';
entities['211'] = 'Ó';
entities['212'] = 'Ô';
entities['213'] = 'Õ';
entities['214'] = 'Ö';
entities['215'] = '×';
entities['216'] = 'Ø';
entities['217'] = 'Ù';
entities['218'] = 'Ú';
entities['219'] = 'Û';
entities['220'] = 'Ü';
entities['221'] = 'Ý';
entities['222'] = 'Þ';
entities['223'] = 'ß';
entities['224'] = 'à';
entities['225'] = 'á';
entities['226'] = 'â';
entities['227'] = 'ã';
entities['228'] = 'ä';
entities['229'] = 'å';
entities['230'] = 'æ';
entities['231'] = 'ç';
entities['232'] = 'è';
entities['233'] = 'é';
entities['234'] = 'ê';
entities['235'] = 'ë';
entities['236'] = 'ì';
entities['237'] = 'í';
entities['238'] = 'î';
entities['239'] = 'ï';
entities['240'] = 'ð';
entities['241'] = 'ñ';
entities['242'] = 'ò';
entities['243'] = 'ó';
entities['244'] = 'ô';
entities['245'] = 'õ';
entities['246'] = 'ö';
entities['247'] = '÷';
entities['248'] = 'ø';
entities['249'] = 'ù';
entities['250'] = 'ú';
entities['251'] = 'û';
entities['252'] = 'ü';
entities['253'] = 'ý';
entities['254'] = 'þ';
entities['255'] = 'ÿ';
}
if (useQuoteStyle !== 'ENT_NOQUOTES') {
entities['34'] = '"';
}
if (useQuoteStyle === 'ENT_QUOTES') {
entities['39'] = ''';
}
entities['60'] = '<';
entities['62'] = '>';
// ascii decimals to real symbols
for (decimal in entities) {
if (entities.hasOwnProperty(decimal)) {
hash_map[String.fromCharCode(decimal)] = entities[decimal];
}
}
return hash_map;
}
function htmlentites from http://phpjs.org/functions/htmlentities/ 来自http://phpjs.org/functions/htmlentities/的功能htmlentites
function get_html_translation_table from http://phpjs.org/functions/get_html_translation_table/ 来自http://phpjs.org/functions/get_html_translation_table/的函数get_html_translation_table
I'm no regex expert, but I believe you could do it using backreferences in your regular expression. 我不是正则表达式专家,但是我相信您可以在正则表达式中使用反向引用来做到这一点。
var regExp = /(\<[a-zA-Z]+(\s|>))/g; //Note the additional parentheses
text = text.replace(regExp,"<span class='bluefont'>$1</span>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.