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

Question

我目前从我的数据库中直接加载一个值到一个隐藏的文本区域。

<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>

我从那里获取文本区域的内容，然后运行它通过几个简单的 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=\"\" target=\"_blank\"></a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");
    post_text=post_text.replace(/\[url\](.+?)\[\/url\]/g, "<a href=\"\" target=\"_blank\"></a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");

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

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

将其呈现为 HTML，然后由浏览器解析，因此我对 Frontend/client 端的条目进行了所有格式设置。

不过，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;

Above example

那么如何防止替换 [textarea][/textarea] 中的任何内容（在 id="text" 中可能出现不止一次）？

Answer 1

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

然后使用回调函数进行替换。检查第 1 组是否存在，如果存在 return 则未修改。如果没有，我们在文本区域之外进行匹配。

<

交替和匹配的模式示例

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

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

Regex demo

注意在 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=\"\" target=\"_blank\"></a>&nbsp;<img src=\"images/link.gif\" style=\"border:0px\">");
  post_text = post_text.replace(/\[url](.+?)\[\/url]/g, "<a href=\"\" target=\"_blank\"></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>

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

UBB Code [textarea] - do not replace \n by <br> within tags [textarea][/textarea]

javascript

regexp-replace