Php 使用regex+；str_替换为jQuery的prep标记

我使用jQuery操作存储在数据库中的文章

每篇文章分为几个部分。典型部分的HTML如下所示：

<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脚本，它以按钮的形式显示每个标题，可以单击按钮打开或关闭该部分，显示或隐藏文本

唯一困扰我的是代码膨胀；我有数百篇文章要上网，加上所有的代码、图标等都会让我感到痛苦

想象一下，如果我将第一段标签前的所有内容压缩为：

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

方向

这将存储在我的数据库中，但可以使用str_replace和正则表达式来修改显示，以填充空白，将其转换为我上面发布的代码块。如果“方向”被“生态学”取代，那么除了“方向”的每一个实例都会被“生态学”取代之外，其他的样式都是一样的

另外一个优点是，我可以在代码中进行重大更改，而无需更改所有数据库表

---

在我开始这个项目之前，我只是想知道是否有人能告诉我这是一个可行的方案还是一个愚蠢的想法。有更好的方法吗？

继续存储HTML，而不需要所有额外的标记

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

方向
一些方向
生态学
生态信息

您可以使用javascript/jQuery添加id、跨度和类，而不会出现任何问题。试试这样的方法（）：

$（函数（）{
$（'section'）。每个（函数（）{
var html，
$this=$（this），
$h2=$this.children（'h2'），
sectionId=$h2.text（）.toLowerCase（）；
$this.attr({
类：'SecCon'，
id:sectionId，
“数据切换”：“折叠”，
“数据目标”：“#”+sectionId+“2”
});
$h2.包装商（“”）；
html=“”+
'' +
'' +
'';
$h2.find（'.label'）.prepend（html）；
$this.children（'div'）.attr({
类：“文章中的折叠”，
id:sectionId+“2”
});
});
});

。您文章的数据是否未存储在数据库中？你能展示你的服务器代码，以及你接收数据的格式吗？@thomas-对不起，我不知道你说的“服务器代码”是什么意思。我正在使用PHP和MySQL。我只需查询我的数据库，然后通过回显$Content来显示一篇文章？所有这些数据都存储在once db字段中吗？也许有一种更干净的方法可以做到这一点。哇，那太好了！不过我犯了一个错误。如果标题是“Evolution”，那么您的脚本将创建id“Evolution”。但我从未想过标题包含多个单词。例如，标题“How Evolution Works”将产生id“How Evolution Works”。我有一个解决办法，但我可能要到今天晚些时候才能提出一个新问题。当我发布它时，我会在这里发布一个新问题的链接，供其他可能有相同问题的人使用。我认为最简单的解决方法是用破折号替换空格：

sectionId=$h2.text（）.toLowerCase（）.replace（/\s/g，'-'）
$(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'
        });
    });
});