javascript - jQuery检测命令/自定义BBcode

因此，我希望能够检测到论坛上的用户在帖子中写的内容，并相应地更改CSS。例如，

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

应该突出显示文本：

style="background-color: yellow"

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

先谢谢了。

当前无效的代码：

$('.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：使用库

已经有很多解析BBCode的JavaScript库。 This one看起来很有前途，并且可以扩展，因此您可以添加自己的标签。您还可以考虑使用服务器端的库（例如，PHP的jBBCode）在服务器端（在PHP或您使用的任何设备）中进行解析。

选项2：自己动手做

不需要实际的jQuery。取而代之的是，对于简单的标签，正则表达式可以解决问题：

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。


在操作here中查看它。

替换论坛帖子的内容

现在，您将需要Som jQuery。我将假设要用HTML替换BBCode中包含论坛帖子的元素都具有一个名为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的更多信息，您可以随时查看documentation。

关于javascript - jQuery检测命令/自定义BBcode，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31417064/