英文:
Change H1 with H2 within a class with JavaScript
问题
我绝对不是一个编程人员，但我有一个想法。我用webflow工具创建网站，当你设置一个具有富文本字段的CMS集合时，客户可以添加包括h1的标题，我不希望他们这样做。我的想法是，用javascript将每个h1替换为class内的h2（这样页面标题不会改变）。
到目前为止，我设法创建了这个：
英文:
I'm in no way a coder but I got an idea. I create websites with the tool webflow and when you set up a CMS collection with a rich-text-field the client can add headlines including h1, which I don't want them to. My idea is that with javascript replace every h1 with h2 within a class (so the page title doesn't get changed).
So far I manage to create this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var e = document.getElementsByTagName('h1')[0];
var d = document.createElement('h2');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
<!-- language: lang-html -->
<h1>Don't change this</h1>
<div class="the-class">
<h1>Replace this with h2</h1>
</div>
<!-- end snippet -->
答案1
得分: 5
可以使用 querySelector 并使用适当的 CSS 选择器仅匹配 .the-class 内的 <h1> 元素：
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
for (let header of document.querySelectorAll('.the-class h1')) {
// 我给这些变量起了实际的名字，非常好的做法
var new_header = document.createElement('h2');
new_header.innerHTML = header.innerHTML;
header.parentNode.replaceChild(new_header, header);
}
<!-- language: lang-html -->
<h1>不要更改这个</h1>
<div class="the-class">
<h1>用 h2 替换这个</h1>
</div>
<!-- end snippet -->
这将替换所有 .the-class 内的任何位置的 h1 元素
英文:
You can use querySelector and use a proper CSS selector to match only <h1> elements inside .the-class:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
for (let header of document.querySelectorAll('.the-class h1')) {
// I gave these variables real names, very good practice
var new_header = document.createElement('h2');
new_header.innerHTML = header.innerHTML;
header.parentNode.replaceChild(new_header, header);
}
<!-- language: lang-html -->
<h1>Don't change this</h1>
<div class="the-class">
<h1>Replace this with h2</h1>
</div>
<!-- end snippet -->
This will replace all h1 elements anywhere inside .the-class
答案2
得分: 0
[编辑 2023/04/18] 这是一个实用函数，可以更改任何标签的名称，同时保留原始标签的属性。它替换了outerHTML中的标签名称部分。
注意: 浏览器会自动替换结束标记。
另请参阅。
/*
简化的替代方案：一个通用函数
通过更改其outerHTML来更改元素的标签名称。
这保留了原始元素的属性/类名
*/
const replaceElem = (elem, nwTag) =>
elem.outerHTML = elem.outerHTML
.replace(RegExp(`^<${elem.tagName}`, `i`), `<${nwTag}`);
document.querySelectorAll(`.the-class h1`)
.forEach(h1 => replaceElem(h1, `h2`));
document.querySelectorAll(`div`)
.forEach(div => replaceElem(div, `span`));
/*
original snippet
-----------------
document.querySelectorAll(`.the-class h1`)
.forEach(h1 => h1.replaceWith( Object.assign(
document.createElement(`h2`), {
innerHTML: h1.innerHTML,
className: [...(h1.classList || [])].join(` `)
} ) ) );
*/
body {
font: normal 12px/15px verdana, arial, sans-serif;
}
h1 { color: red; }
h2.italic { font-style: italic; }
h2.blue { color: blue; }
h2[data-header] { background-color: #eee; }
span.the-class { display: block; }
span.the-class::after {
content: 'Once I was
font-size: 1.2rem;
margin-left: 2rem;
}
Don't change this
Replace this with h2
Replace this with h2 too
He! I want to be replaced too!
<details>
<summary>英文:</summary>
[edit 2023/04/18] Here is a utility function to change the name of any tag, whilst maintaining the properties of the original. It replaces the tagname part of `outerHTML`.
<b>Note</b>: the browser automagically replaces the end tag.
[See also](https://stackblitz.com/edit/js-8nifvy?file=index.js).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
/*
Simplified alternative: a generic function
to change the tag name of an element by
changing its outerHTML.
This conserves attributes/classNames of the
original element
*/
const replaceElem = (elem, nwTag) =>
elem.outerHTML = elem.outerHTML
.replace(RegExp(`^<${elem.tagName}`, `i`), `<${nwTag}`);
document.querySelectorAll(`.the-class h1`)
.forEach(h1 => replaceElem(h1, `h2`));
document.querySelectorAll(`div`)
.forEach(div => replaceElem(div, `span`));
/*
original snippet
-----------------
document.querySelectorAll(`.the-class h1`)
.forEach(h1 => h1.replaceWith( Object.assign(
document.createElement(`h2`), {
innerHTML: h1.innerHTML,
className: [...(h1.classList || [])].join(` `)
} ) ) );
*/
<!-- language: lang-css -->
body {
font: normal 12px/15px verdana, arial, sans-serif;
}
h1 { color: red; }
h2.italic { font-style: italic; }
h2.blue { color: blue; }
h2[data-header] { background-color: #eee; }
span.the-class { display: block; }
span.the-class::after {
content: 'Once I was <div> 😔';
font-size: 1.2rem;
margin-left: 2rem;
}
<!-- language: lang-html -->
<h1>Don't change this</h1>
<div class="the-class">
<h1>Replace this with h2</h1>
</div>
<div class="the-class">
<h1 class="blue" data-header="2">Replace this with h2 too</h1>
</div>
<div class="the-class">
<h1 class="italic blue">He! I want to be replaced too!</h1>
</div>
<!-- end snippet -->
</details>
# 答案3
**得分**: 0
选择所有类内的 h1，用 createElement 创建新的 h2，用 replaceWith 进行交换。
```js
document.querySelectorAll('.the-class h1').forEach(h1 => {
const h2 = document.createElement('h2');
h2.innerHTML = h1.innerHTML;
h1.replaceWith(h2);
});
h1 {
color: red;
}
h2 {
color: blue;
}
<h1>不要改变这个</h1>
<div class="the-class">
<h1>用 h2 替换这个</h1>
</div>
<div class="the-class">
<h1>并用 h2 替换这个</h1>
</div>
英文:
querySelectorAll to select the h1s inside of a class, createElement to make the new h2, and replaceWith to swap.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.querySelectorAll('.the-class h1').forEach(h1 => {
const h2 = document.createElement('h2');
h2.innerHTML = h1.innerHTML;
h1.replaceWith(h2);
});
<!-- language: lang-css -->
h1 {
color: red;
}
h2 {
color: blue;
}
<!-- language: lang-html -->
<h1>Don't change this</h1>
<div class="the-class">
<h1>Replace this with h2</h1>
</div>
<div class="the-class">
<h1>And Replace this with h2</h1>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年4月17日 19:25:18
- 转载请务必保留本文链接：https://go.coder-hub.com/76034638.html
评论