使用正则表达式+ str_replace为jQuery准备标签 [英] Using regex + str_replace to prep tags for jQuery

问题描述

我正在使用jQuery处理存储在数据库中的文章.

I'm using jQuery to manipulate articles stored in a database.

每篇文章都分为几个部分.典型部分的HTML如下所示:

Each article is divided into sections. The HTML for a typical section looks like this:

<section id="directions" data-toggle="collapse" data-target="#directions2" class="SecCon">
  <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Directions</span>      </h2>
  <div id="directions2" class="collapse in article">
    <p>Animals have the power of locomotion.</p>
  </div>
<section>

工作正常；结合一些jQuery脚本，它以按钮的形式显示每个标题，可单击该按钮以打开或关闭该部分，以显示文本或将其隐藏.

It works fine; combined with some jQuery scripts, it displays each heading in the form of a button that can be clicked to open or close that section, displaying text or hiding it.

唯一困扰我的是代码膨胀；我有成百上千的文章可以上网，而添加所有代码，glyphicons等正变成一种痛苦.

The only thing bothering me is code bloat; I have hundreds of articles to get online, and adding all that code, glyphicons, etc. is turning into a pain.

因此，想象一下，如果我将第一段标记之前的所有内容压缩为:

So imagine if I condensed everything before the first paragraph tag to this:

<section>
  <h2>Directions</h2>
    <div>

那将存储在我的数据库中，但是可以使用str_replace和一个正则表达式修改显示内容以填补空白，并将其转换为我上面发布的代码块.而且，如果将方向"替换为生态"，则其样式将相同，只是方向"的每个实例都将被生态"替换.

That would be stored in my database, but the display could be modified with str_replace and a regular expression to fill in the blanks, transforming it into the block of code I posted above. And if 'Directions' was replaced by 'Ecology', then that would be styled the same except that every instance of 'directions' would be replaced by 'ecology'.

另一个优点是，我可以对代码进行重大更改，而不必更改我的所有数据库表.

An added advantage is that I could make major changes in the code without having to alter all my database tables.

在进入这个项目之前，我只是想知道是否有人可以告诉我这是一个可行的方案还是一个愚蠢的想法.有更好的方法吗?

Before I dive into this project, I just wondered if someone could tell me if this a workable scheme or a dumb idea. Is there a better way of doing it?

推荐答案

继续并存储没有所有额外标记的HTML.

Go ahead and store the HTML without all the extra markup.

<section>
    <h2>Directions</h2>
    <div>Some directions</div>
</section>
<section>
    <h2>Ecology</h2>
    <div>Ecology info</div>
</section>

您可以使用javascript/jQuery来添加ID，跨度和类，而不会出现任何问题.尝试这样的操作(演示):

You can use javascript/jQuery to add the id's, spans and classes without any problem. Try something like this (demo):

$(function () {
    $('section').each(function () {
        var html,
            $this = $(this),
            $h2 = $this.children('h2'),
            sectionId = $h2.text().toLowerCase();
        $this.attr({
            class : 'SecCon',
            id : sectionId,
            'data-toggle' : 'collapse',
            'data-target' : '#' + sectionId + '2'
        });
        $h2.wrapInner('<span class="label label-primary"/>');

        html = '<small>' +
            '<span class="only-collapsed glyphicon glyphicon-chevron-down"></span>' +
            '<span class="only-expanded glyphicon glyphicon-remove-sign"></span>' +
            '</small>';
        $h2.find('.label').prepend(html);

        $this.children('div').attr({
            class : 'collapse in article',
            id : sectionId + '2'
        });
    });
});

这篇关于使用正则表达式+ str_replace为jQuery准备标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！