Jquery检测命令/自定义BBcode

Jquery detect commands/Custom BBcode

本文关键字：自定义 BBcode 命令 检测 Jquery      更新时间：2023-09-26

所以我想能够检测什么用户在我的论坛上写的帖子，并相应地改变它的CSS。例如,

[hl color:'yellow']example test[/hl]

应该对文本应用高亮显示:

style="background-color: yellow"

我希望jQuery代码检测[hl color:，如果成功，将' '之间的值保存在一个变量中，然后测试剩余的]。然后，我希望它将style="background-color: " + var应用于]之后和[/hl]之前的文本

Thanks in advanced.

当前无效代码:

$('.post').each(function() {   
  if($(this:contains('[hl color:'))) {
    var txt = [I have no idea];
    $(select the text in between tags).attr('style', 'background-color:' + txt);
  }
});

选项1:使用库

已经有很多JavaScript库可以解析BBCode。这个看起来很有前途，并且是可扩展的，因此您可以添加自己的标记。您还可以考虑在服务器端(在PHP或任何您正在使用的)使用库(如PHP的jBBCode)进行解析。

选项2:自己动手

不需要实际的jQuery。相反，对于简单的标签，regex可以做到这一点:

function bbcodeToHTML(bbcode) {
  return bbcode.replace(
           /'['s*hl's*color's*:'s*(.*?)'s*'](.*?)'['s*'/'s*hl's*']/gi,
           '<span style="background-color:$1;">$2</span>'
         );
}

这个正则表达式是做什么的?

  • '['s*hl's*color's*:'s*:文字[，然后是任意数量的空白，然后是color，然后是任意数量的空白，然后是文字:，然后是任意数量的空白。
  • (.*?):惰性捕获(作为$1)任何字符。这意味着它尝试匹配尽可能少的字符。
  • 's*']:结束开始标记。
  • (.*?):与上面相同，但捕获$2
  • '['s*'/'s*hl's*']:结束标记，包含任意数量的空格。
  • g:全局标志。替换所有匹配项，并且在第一次之后不停止。
  • i:不区分大小写。匹配HL和hl

在这里看到它的作用

替换论坛帖子内容

现在您将需要一些jQuery。我将假设在BBCode中包含论坛帖子的元素，您希望用HTML替换它们，这些元素都有一个名为post的类，以便可以识别它们。那么下面的代码将完成工作:

//Itterate over all forum posts.
jQuery('.post').each(function() {
    //Get a reference to the current post.
    currentPost = jQuery(this);
    //Get the content ant turn it into HTML.
    postHTML = bbcodeToHTML(currentPost.html());
    //Put the html into the post.
    currentPost.html(postHTML);
});

有关jQuery的更多信息，您可以随时查看文档

相关文章：