页面加载后更改 HTML 代码（使用 jQuery？）答案

【问题标题】：Change HTML code after page load (w/ jQuery ?)页面加载后更改 HTML 代码（使用 jQuery？）
【发布时间】：2021-07-29 14:33:04
【问题描述】：

我正在尝试找到一种方法来修改HTML 代码以将每个 Bootstrap col 类名称（col、col-xs-x、col-x 等）替换为col-12 页面加载后。

我可以用.removeClass('name') 和.addClass('name') 做到这一点，但我需要使用一些正则表达式，因为我想修改 Bootstrap col 类名。

来自这样的事情：

<body>
    <div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
    <div class="col"> Content 2 </div>
</body>

我想修改成这样：

<body>
    <div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
    <div class="col-12"> Content 2 </div>
</body>

我在这里发现有人在 jQuery 中使用 html().replace 执行此操作，因此我尝试执行相同操作，但它不起作用。

像这样：

$(document).ready(function () { // my RegEx works well, verified it on regex101
    let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
    $('body').html(col_let_num)
})

所以我的问题是，您有什么解决方案可以在页面加载后更改 HTML 内容吗？

【问题讨论】：

我认为您没有正确使用引导程序，如果您正确使用引导程序断点类，则不需要删除它们。
添加引导标记，以便引导专家可以介入。我建议解释问题是什么以及您要达到的目标，而不是询问如何大规模更新 HTML
另外$('body').html() 是一件很糟糕的事情......
是的，但我找不到使用 RegEx 更改这些类名的方法。事实是，如果人们选中一个框，我希望整个列都是 col-12。清楚吗？
有道理，我建议在问题中添加这个用例，使用引导实用程序类可能会有一个聪明的答案

标签： html jquery css twitter-bootstrap replace

【解决方案1】：

您忘记在 Javascript 中添加 ')'。但我真的无法意识到你在这里想要做什么。任何方式

$(document).ready(function () { // my RegEx works well, verified it on regex101
    let col_let_num = $('body').html().replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
    $('body').html(col_let_num)
})

已编辑 给你

$('[class*="col"]').each((i, e) => {
    let classes = $(e).attr('class').split(/\s+/);

    classes.forEach(v => {
        let col_let_num = v.replace(/\bcol\b(\-[a-z]{0,2})?(\-)?([0-9]{0,2})?/i, 'col-12')
        $(e).attr('class', col_let_num)
    })
})

这应该可以。

【讨论】：

谢谢，我加了。我想要一种用 col-12 替换每个 Bootstrap col 类名的方法。
@Kiji_T 用正确的方法编辑了答案。 :)
它似乎工作，但我有一个疑问，我认为它删除了我一些
。可能吗？（我在看）
@Kiji_T 嗯，不。尝试输出div，看看代码console.log($('div').length)之前和之后是否有任何变化。
没关系，你只是个神。谢谢你。我想知道你为什么在函数中添加 i、e 和 v。你能告诉我为什么不使用 $(this) 吗？