ckeditor ubb正则替换规则

ts_shinian_web

已于 2023-02-09 11:40:40 修改

阅读量260

点赞数

分类专栏： javascript UBB 文章标签： javascript node.js webpack 前端

于 2021-12-08 16:13:30 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53445649/article/details/121794061

版权

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

UBB

1 篇文章

订阅专栏

本文介绍了一个JavaScript函数库，用于将HTML文本转换为符合UBB（通用标记语言）规范的格式，包括字体、颜色、链接等元素的转换，并展示了如何进行格式预览和清除。主要关注的是前端显示和格式转换技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// html 转 ubb
var htmlToBBCode = function (html) {
    html = html.replace(/\[/gi, "&lBrac");
    html = html.replace(/\]/gi, "&rBrac");
    // html = html.replace(/<b>/gi, "[b]");
    html = html.replace(/<i>/gi, "[i]");
    html = html.replace(/<u>/gi, "[u]");
    // html = html.replace(/<\/b>/gi, "[/b]");
    html = html.replace(/<\/i>/gi, "[/i]");
    html = html.replace(/<\/u>/gi, "[/u]");
    html = html.replace(/<s>/gi, "[s]");
    html = html.replace(/<\/s>/gi, "[/s]");
    html = html.replace(/<em>/gi, "[i]");
    html = html.replace(/<\/em>/gi, "[/i]");
    html = html.replace(/<strong>/gi, "[b]");
    html = html.replace(/<\/strong>/gi, "[/b]");
    html = html.replace(/<a(.*?)href="(.*?)"(.*?)>(.*?)<\/a>/gi, "[url=$2]$4[/url]");
    html = html.replace(/<span class="nb" style="text-align:( )?(.*?)(;)?">(.*?)<\/span>$/gi, "[$2]$4[/$2]");
    html = htmlToBBCodeParseSpan(html);

    return html;
}

var htmlToBBCodeParseSpan = function (html) {
    if (html.match(/<span[^>]*>/gi)) {
        var found = html.match(/<span[^>]*>[^>]*<\/span>/gi);
        found.forEach(function(v) {
            html = html.replace(v, htmlToBBCodeReplaceSpan(v));
        });
        return htmlToBBCodeParseSpan(html);
    } else {
        return html
    }
}

var htmlToBBCodeReplaceSpan = function (html) {
    html = html.replace(/<span style="font-family:(.*?)">(.*?)<\/span>/gi, "[font=$1]$2[/font]");
    html = html.replace(/<span style="font-size:(.*?)px">(.*?)<\/span>/gi, "[size=$1]$2[/size]");
    html = html.replace(/<span style="color:(.*?)">(.*?)<\/span>/gi, "[color=$1]$2[/color]");
    html = html.replace(/<span style="background-color:(.*?)">(.*?)<\/span>/gi, "[bgcolor=$1]$2[/bgcolor]");
    html = html.replace(/<span>(.*?)<\/span>/gi, "$1");

    return html;
}

// ubb 转 html
var BBCodeToHtml = function (bbcode) {
    bbcode = bbcode.replace(/&amp;lBrac/gi, '[')
    bbcode = bbcode.replace(/&amp;rBrac/gi, ']')
    bbcode = bbcode.replace(/&amp;nbsp;/g, ' ')
    bbcode = bbcode.replace(/&amp;lt;/g, '&lt')
    bbcode = bbcode.replace(/&amp;gt;/g, '&gt')
    bbcode = bbcode.replace(/&amp;amp;/g, '&amp;')
    bbcode = bbcode.replace(/\[i\]/gi, "<em>");
    bbcode = bbcode.replace(/\[\/i\]/gi, "</em>");
    bbcode = bbcode.replace(/\[b\]/gi, "<strong>");
    bbcode = bbcode.replace(/\[\/b\]/gi, "</strong>");
    bbcode = bbcode.replace(/\[u\]/gi, "<u>");
    bbcode = bbcode.replace(/\[\/u\]/gi, "</u>");
    bbcode = bbcode.replace(/\[s\]/gi, "<s>");
    bbcode = bbcode.replace(/\[\/s\]/gi, "</s>");
    bbcode = bbcode.replace(/\[bgcolor=(.*?)\]/gi, '<span style="background-color:$1">')
    bbcode = bbcode.replace(/\[font=(.*?)\]/gi, '<span style="font-family:$1">')
    bbcode = bbcode.replace(/\[size=(.*?)\]/gi, '<span style="font-size:$1px;">')
    bbcode = bbcode.replace(/\[color=(.*?)\]/gi, '<span style="color:$1">')
    bbcode = bbcode.replace(/\[left\]/gi, '<span class="nb" style="text-align: left;">')
    bbcode = bbcode.replace(/\[center\]/gi, '<span class="nb" style="text-align: center;">')
    bbcode = bbcode.replace(/\[right\]/gi, '<span class="nb" style="text-align: right;">')
    bbcode = bbcode.replace(/\[\/(left|center|right)\]/gi, '</span>')
    bbcode = bbcode.replace(/\[\/(font|size|bgcolor|color)\]/gi, "</span>");

    bbcode = bbcode.replace(/\[url=(.*?)\](.*?)\[\/url\]/gi, '<a href="$1">$2<\/a>')
    return bbcode;
}

// ubb对齐方式预览
function BBcodeToShare(bbcode) {

  bbcode = bbcode.replace(/\[left\]/gi, '<p class="nb" style="text-align: left;">')
  bbcode = bbcode.replace(/\[center\]/gi, '<p class="nb" style="text-align: center;">')
  bbcode = bbcode.replace(/\[right\]/gi, '<p class="nb" style="text-align: right;">')
  bbcode = bbcode.replace(/\[\/(left|center|right)\]/gi, '</p>')

  bbcode = BBCodeToHtml(bbcode)
  return bbcode
}

// ubb清除
var BBCodeToEmpty = function (bbcode) {
    bbcode = bbcode.replace(/\[i\]/gi, "");
    bbcode = bbcode.replace(/\[\/i\]/gi, "");
    bbcode = bbcode.replace(/\[b\]/gi, "");
    bbcode = bbcode.replace(/\[\/b\]/gi, "");
    bbcode = bbcode.replace(/\[u\]/gi, "");
    bbcode = bbcode.replace(/\[\/u\]/gi, "");
    bbcode = bbcode.replace(/\[s\]/gi, "");
    bbcode = bbcode.replace(/\[\/s\]/gi, "");
    bbcode = bbcode.replace(/\[bgcolor=(.*?)\]/gi, '')
    bbcode = bbcode.replace(/\[font=(.*?)\]/gi, '')
    bbcode = bbcode.replace(/\[size=(.*?)\]/gi, '')
    bbcode = bbcode.replace(/\[color=(.*?)\]/gi, '')
    bbcode = bbcode.replace(/\[left\]/gi, '')
    bbcode = bbcode.replace(/\[center\]/gi, '')
    bbcode = bbcode.replace(/\[right\]/gi, '')
    bbcode = bbcode.replace(/\[\/(left|center|right)\]/gi, '')
    bbcode = bbcode.replace(/\[\/(font|size|bgcolor|color)\]/gi, "");

    bbcode = bbcode.replace(/\[url=(.*?)\](.*?)\[\/url\]/gi, '')
    return bbcode;
}