javascript - RegEx 如何避免自动关闭 HTML 标签

Question

HTML:

<pre class="html">
   List<String> list = Arrays.asList(str);
</pre>

JS:

var symbols = /(<|>|{|})/gi;

$('.html').each(function() {
   var abc =  $(this).html().replace(symbols, "<span class='blue'>$1</span>");
$(this).html(abc);
}

输出:(我可以更改 <,> 的颜色)

List<string> list = Arrays.asList(str);
</string>

它自动附加

 </string> at the end

并将字符串更改为字符串(首字母大写改为小写)

任何人都可以帮我解决这个问题吗？

Answer 1

不要这样做:

<pre class="html">
   List<String> list = Arrays.asList(str);
</pre>

转义括号:

<pre class="html">
   List&lt;String&gt; list = Arrays.asList(str);
</pre>

<小时/>

另一种方法是将代码放在脚本标记中，以避免它被解释为 HTML 标记:

<script type="template" id="code">
List<String> list = Arrays.asList(str);
</script>
<div id="output"></div>

var symbols = /(<|>|{|})/gi;

var code = document.getElementById("code").textContent;
document.getElementById("output").innerHTML = code.replace(symbols, "<span class='blue'>$1</span>");

缺点是所有前导空格都会消失。