我有一个表单，用户可以在其中输入一些代码，然后我想使用Javascript在网页中将其显示回来。我已经在javascript中使用正则表达式来替换所有＆lt; ＆GT;带有html关键字＆amp; lt和＆amp; gt的标签，但我想以蓝色突出显示正在打开的标签的所有实例，然后以空格或关闭标签结束。我可以找到我想要的表达式，但我想用＆lt;跨度＆GT;标签
实际代码很长但是这里有一些示例代码涵盖了我想要做的事情：
//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;
现在我想找到表达式，并将它们全部替换为自己包含在span标签内，例如：
text = text.replace(regExp,"<span class='bluefont'>EACH EXPRESSION FOUND</span>");
我不知道该怎么做或者甚至可能只使用替换，但如果它真的很方便。
我知道有用于语法突出显示的外部库，但我不想为此使用任何外部库。我正在使用[a-zA-Z]而不是在html中检查合法标签名称，因为我希望这也适用于xml / xhtml。
答案 0 :(得分：0)
有一个简单的解决方案 - 替换所有＆lt;和＆gt;有了entites，下次使用正则表达式(\<[a-zA-Z]*\>)。但确切地说，我会使用其他东西进行首次替换，如下所示。
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;
}
功能 htmlentites 来自http://phpjs.org/functions/get_html_translation_table/的
功能 get_html_translation_table
答案 1 :(得分：0)
我不是正则表达式专家，但我相信你可以在正则表达式中使用反向引用。
var regExp = /(\<[a-zA-Z]+(\s|>))/g; //Note the additional parentheses
text = text.replace(regExp,"<span class='bluefont'>$1</span>");