Javascript, который заменяет текст в квадратных скобках в тег, не работает с <style>

У меня есть кусок JQuery, который заменяет кронштейны {} с <>, которые находятся внутри тела:Javascript, который заменяет текст в квадратных скобках в тег, не работает с <style>

JQuery:

window.onload=function() { 
$("body").children().html(function (_, html) { 
    return html 
    .replace(/\{/g,"<")  
    .replace(/b\@/g,"strong") 
.replace(/\!/g,"/") 
    .replace(/\}/g,">"); 
}); 
}

HTML

<!DOCTYPE HTML> 
<html> 

<head> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="tags.js" type="text/javascript"></script> 
<meta charset="utf-8"> 
<title>Something</title> 
</head> 
<body> 
<w> 
<style> 
.red { 
color: red; 
} 
</style> 
{style} 
body { 
background-color:red; 
} 
{!style} 

{[email protected] class="red"} 
Some Bold Text 
{[email protected]} 

</w> 
</body> 
</html>

Но когда я пытаюсь вставить подменю тега {style}, теги стиля работают, но CSS фактически не отображается. Также, когда я пытаюсь применить color:red в обычном теге стиля к .red {[email protected]}, он не работает, но он работает, если я применил стиль inline.

Вопрос: Есть ли способ сделать CSS-рендеринг правильно внутри тегов стиля?

источник

2015-06-05 ScriptKitty

Его потому, что 'body { background-color: red; } 'становится' body < background-color: red; > ' – putvande

Тэги стиля не допускаются в теле, они должны быть в голове. – Barmar

@Barmar Если они не ограничены или внутри шаблона. – Oriol

-1

Это потому, что <style> тег не был скомпилирован браузером, так как вы написали {style}, вы не можете заставить его работать, заменив {} на <>. Необходимо выполнить замену, когда выполняется ваш скрипт, затем загрузите весь код в jquery и добавьте его на страницу

источник

2015-06-05 22:33:02 user3491125

Вы очень близки. Вам просто нужно добавить эти строки в конце кода:

$('style').appendTo('head').text(function() { 
    return $(this).text().replace(/\</g,'{').replace(/\>/g,'}'); 
});

Это перемещает style элементы в head, и он отменяет текст замены в своем предыдущем коде для этих элементов.

Отрывок:

window.onload=function() { 
 
    $("body").children().html(function (_, html) { 
 
    return html 
 
    .replace(/\{/g,"<")  
 
    .replace(/b\@/g,"strong") 
 
.replace(/\!/g,"/") 
 
    .replace(/\}/g,">"); 
 
    }); 
 

 
    $('style').appendTo('head').text(function() { 
 
    return $(this).text().replace(/\</g,'{').replace(/\>/g,'}'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<w> 
 
<style> 
 
.red { 
 
color: red; 
 
} 
 
</style> 
 
{style} 
 
body { 
 
background-color:yellow; 
 
} 
 
{!style} 
 

 
{[email protected] class="red"} 
 
Some Bold Text 
 
{[email protected]} 
 

 
</w> 
 
</body>

источник

2015-06-05 22:56:41

Как @barmar словам, {} были перекрывая CSS скобки, так что я просто изменил {} к [], так что он не будет мешать.

источник

2015-06-05 23:16:49 ScriptKitty

Javascript, который заменяет текст в квадратных скобках в тег, не работает с <style>

ответ

Смежные вопросы