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

Posted 2023-03-28

【中文标题】UBB 代码 [textarea] - 不要在标签 [textarea][/textarea] 中将 \\n 替换为 <br>

【英文标题】：UBB Code [textarea] - do not replace \n by <br> within tags [textarea][/textarea]UBB 代码 [textarea] - 不要在标签 [textarea][/textarea] 中将 \n 替换为 <br>

【发布时间】：2021-10-10 09:37:27

【问题描述】：

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

<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] 元素中的内容，从而导致 textarea 填充以下内容：

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

Above example

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

【参考方案1】：

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

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

< 的交替和匹配模式示例

(\[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=\"$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>

【讨论】：

我知道我不应该根据 ***，但是非常感谢你，第四只鸟！这完全符合我的要求。感谢您提供工作代码，让我更容易理解如何在进一步的项目中实现它。