如何在JavaScript/PHP中让编辑textarea显示PHP BBCODE而非HTML标签

往MySQL插入数据时，我使用PHP BBCODE（如[video=link]）表示YouTube视频；但在编辑textarea时，通过JavaScript获取内容后显示的是HTML标签而非目标BBCODE（如[video=link]）。尝试了如下escapeHtml函数但未生效，希望找到可行方法让textarea显示BBCODE而非HTML标签。

var currentComment = $("#message_" + id + " .message-content").html();
var editText = '<div class="contact-form-area"><form id="post_form2"><div class="row"><div class="col-12"><textarea name="post_content2" id="post_content'+id+'" class="edit_comment">'+currentComment+'</textarea></div><div class="col-12"><input type="hidden" class="id_content" id="'+id+'" /><button type="button" class="cancel btn vizew-btn" style="float:left;" data-message="'+currentComment+'" id="'+id+'"> Cancel</button> <button type="button" class="save btn vizew-btn" id="'+id+'" style="float:right;"> Save</button></div></div></form></div>';

function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "<")
         .replace(/>/g, ">")
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }

问题根源 #

你用.html()获取的是渲染后的HTML内容，而非原始的BBCODE。escapeHtml函数只是转义HTML字符，无法将已渲染的HTML反向转换为BBCODE，所以不起作用。

最优方案：存储原始BBCODE #

在PHP渲染页面时，将原始BBCODE存储到元素的自定义属性（如data-original）中，这样JS可以直接获取原始值：

1. PHP渲染修改：

<div id="message_<?php echo $id; ?>">
    <div class="message-content" data-original="<?php echo htmlspecialchars($bbcode); ?>">
        <?php echo parse_bbcode($bbcode); // 这里是你将BBCODE转为HTML的解析函数 ?>
    </div>
</div>

2. JS代码修改：

// 直接获取存储的原始BBCODE
var currentComment = $("#message_" + id + " .message-content").data('original');
// 生成编辑区域时直接使用原始值
var editText = '<div class="contact-form-area"><form id="post_form2"><div class="row"><div class="col-12"><textarea name="post_content2" id="post_content'+id+'" class="edit_comment">'+currentComment+'</textarea></div><div class="col-12"><input type="hidden" class="id_content" id="'+id+'" /><button type="button" class="cancel btn vizew-btn" style="float:left;" data-message="'+currentComment+'" id="'+id+'"> Cancel</button> <button type="button" class="save btn vizew-btn" id="'+id+'" style="float:right;"> Save</button></div></div></form></div>';

备选方案：HTML转BBCODE（局限性大） #

如果无法修改后端渲染逻辑，可编写反向转换函数，将特定HTML标签转为对应的BBCODE。示例：

function htmlToBbcode(html) {
    // 示例：将YouTube iframe转换为[video=链接]格式
    return html.replace(
        /<iframe[^>]+src="https?:\/\/www\.youtube\.com\/embed\/([^"]+)"[^>]*><\/iframe>/g,
        '[video=https://www.youtube.com/watch?v=$1]'
    );
    // 可根据你的BBCODE规则添加更多替换规则
}

// 使用方式
var currentCommentHtml = $("#message_" + id + " .message-content").html();
var currentComment = htmlToBbcode(currentCommentHtml);

注意：这种方法仅适用于固定格式的HTML，若HTML结构有变化会失效，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者Scott Pascal