UBB代码[textarea] -不要在标记[textarea][/textarea]中用<br>替换\n

Question

目前，我直接将一个值从数据库加载到一个隐藏的textarea中。

<textarea name="text" id="text" style="visibility:hidden">
[textarea]Content showing raw [b]HTML[/b] or any other code
Including line breaks </a>[/textarea]
</textarea>

在那里，我获取textarea的内容并通过使用一个简单的Javascript替换参数来运行它，如

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function parser() {  
    post_text=post_text.replace(/\r?\n/g, "<br>"); 
    post_text=post_text.replace(/\[size=1\]/g, "<span style=\"font-size:80%\">"); 
    post_text=post_text.replace(/\[url=(.+?)\](.+?)\[\/url\]/g, "<a href=\"$1\" target=\"_blank\">$2</a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");
    post_text=post_text.replace(/\[url\](.+?)\[\/url\]/g, "<a href=\"$1\" target=\"_blank\">$1</a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");

document.getElementById('vorschau').innerHTML = post_text; 
}, false);
</script>

<div id="vorschau"></div>

将其呈现为HTML，然后由浏览器进行分析，因此我在前端/客户端对条目进行了所有格式设置。

然而，textarea也可能包含这样一个UBB标记：

[textarea]Content showing raw [b]HTML[/b] or any other code
Including line breaks </a>[/textarea]

目前，我只是像其他任何内容一样替换textarea UBB元素。

post_text=post_text.replace(/\[textarea\]/g, "<textarea id=\"codeblock\" style=\"width:100%;min-height:200px;\">");
post_text=post_text.replace(/\[\/textarea\]/g, "</textarea>");  

问题是我的另一段代码

post_text=post_text.replace(/\r?\n/g, "<br>");
post_text=post_text.replace(/\</g, "&lt;");
post_text=post_text.replace(/\>/g, "&gt;");

不会跳过textarea元素中的内容，从而生成一个包含以下内容的textarea：

Content showing raw <b>HTML</b> or any other code<br>Including line breaks &lt;/a&gt;

上例

那么，如何防止在文本区域内替换任何内容(可以在“id=”中多次发生)？

Answer 1

您可能要做的是使用从[textarea]捕获到第1组中的[/textarea]的动态模式，并使用替换来匹配您想要替换的内容。

然后使用回调函数替换。检查组1是否存在，如果它确实未修改地返回它。如果没有，则在文本区域外有一个匹配项。

<模式交互与匹配的一个例子

(\[textarea][^]*\[\/textarea])|<

• (\[textarea][^]*\[\/textarea])捕获组1，从[textarea]到[/textarea]匹配
• |或
• <匹配

Regex演示

Note用于双转义RegExp构造函数中的反斜杠。

(假设这是正确的替换顺序：)

​

const replacer = (text, find, replace) => text.replace(
  new RegExp(`(\\[textarea][^]*\\[\\/textarea])|${find}`, "g"),
  (m, g1) => g1 ? g1 : replace
);
document.addEventListener('DOMContentLoaded', function parser() {

  let post_text = document.getElementById('text').value;
  post_text = post_text.replace(/\[size=1]/g, "<span style=\"font-size:80%\">");
  post_text = post_text.replace(/\[url=(.+?)](.+?)\[\/url\]/g, "<a href=\"$1\" target=\"_blank\">$2</a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");
  post_text = post_text.replace(/\[url](.+?)\[\/url]/g, "<a href=\"$1\" target=\"_blank\">$1</a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");
  post_text = replacer(post_text, "\\r?\\n", "<br>");
  post_text = replacer(post_text, "<", "&lt;");
  post_text = replacer(post_text, ">", "&gt;");
  post_text = post_text.replace(/\[textarea]/g, "<textarea id=\"codeblock\" style=\"width:100%;min-height:200px;\">");
  post_text = post_text.replace(/\[\/textarea]/g, "</textarea>");

  document.getElementById('vorschau').innerHTML = post_text;
}, false);

<textarea name="text" id="text" rows="10" cols="60">
[textarea]Content showing raw [b]HTML[/b] or any other code
Including line breaks </a>[/textarea]
    
    
    < here and > here and
</textarea>

<div id="vorschau"></div>

​