使用JavaScript / jQuery处理复杂的html元素

Posted 2023-01-31

我正在使用FirstSpirit CMS。此CMS以与php类似的方式生成html页面。下面的代码显示了模块的代码段：

<script>
    var elements = 
        start: "$CMS_VALUE(getStartDate)$",
        ende: "$CMS_VALUE(getEndDate)$",
        alwaysVisible: $CMS_VALUE(st_alwaysVisible)$,
        html: [
            $CMS_FOR(element, st_targetContent)$
                content: $CMS_TRIM(level:4)$
                                '$CMS_VALUE(element)$'
                                $CMS_IF(!#for.isLast)$,$CMS_END_IF$
                            $CMS_END_TRIM$
            $CMS_END_FOR$
        ]
    

    targetingContent.push(elements);
</script>

正如您所看到的，我想生成一个JSON对象，该对象被推送到另一个地方定义的数组targetingContent。该对象具有存储在st_targetContent中的多个内容部分。在我的for-loop中，我想把这些部分中的每一部分都存储在内容中。我的问题是，每个element都包含复杂的html结构（从简单的文本图像组合到大型图像库）。这是一个例子：

<div class="po-dynamicElement po-element element-invisible" data-divisionid="4" data-divisionname="Industrie" >
    <h1 id="headline_ich_bin_das_industrie">Ich bin das Industrie</h1>
    <div class="section text-image">
        <div class="row">
            <div class="col-12 mb-4">
                <figure>
                    <img class="img-fluid" src="/fs5preview/preview/522144/media/DE/current/526966/res_wl2bootstrap_1200/background_kfz_710.jpg" title="sdf" alt="dfad" width="1200" height="799" />
                </figure>
            </div>
            <div class="col-12">
                <p><b>Metall</b></p>
                <p>Lorem ipsum ...</p>
            </div>
        </div>
    </div>
</div>

是否可以将此html结构放在json对象中？我试图将整个字符串放在一行中并用单引号括起来。这可以正常工作，直到有人在文本中使用单引号。它也使源代码非常难看。

答案

我首先要在“Java世界”中构建完整的结构，即使用FirstSpirit模板变量。然后，您可以将其转换为JSON结构，只需调用.toJSON()即可。 .toJSON()将负责报价。

可以使用$CMS_FOR$循环在列表中收集内容部分，从空列表开始并在每次迭代中调用Java方法.add。为此，我们在下面的代码中使用$CMS_SET(void, set_html.add(...))$。我们并没有真正设置变量，我们只想要发生.add的副作用，即将一个元素附加到列表中。

我不确定你的st_targetContent到底是什么。如果它是字符串的容器，则以下内容应该有效。我们在项目中大量使用这种方法。但请注意，我无法测试以下代码，因为我的私人计算机上没有安装FirstSpirit。

$CMS_SET(set_html, [])$
$CMS_FOR(for_element, st_targetContent)$
    $CMS_SET(set_content, 
        "content": for_element
    )$
    $CMS_SET(void, set_html.add(set_content))$
$CMS_END_FOR$
$CMS_SET(set_elements, 
    "start": getStartDate,
    "ende": getEndDate,
    "alwaysVisible": st_alwaysVisible,
    "html": set_html
)$
<script>
    var elements = $CMS_VALUE(set_elements.toJSON())$;
    targetingContent.push(elements);
</script>