用JavaScript在一个类内将H1更改为H2。

huangapple
go评论99阅读模式
英文:

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 -->

  1. var e = document.getElementsByTagName(&#39;h1&#39;)[0];
  3. var d = document.createElement(&#39;h2&#39;);
  4. d.innerHTML = e.innerHTML;
  6. e.parentNode.replaceChild(d, e);

<!-- language: lang-html -->

  1. &lt;h1&gt;Don&#39;t change this&lt;/h1&gt;
  2. &lt;div class=&quot;the-class&quot;&gt;
  3.   &lt;h1&gt;Replace this with h2&lt;/h1&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 5

可以使用 querySelector 并使用适当的 CSS 选择器仅匹配 .the-class 内的 &lt;h1&gt; 元素：

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

  1. for (let header of document.querySelectorAll(&#39;.the-class h1&#39;)) {
  2.     // 我给这些变量起了实际的名字，非常好的做法
  3.     var new_header = document.createElement(&#39;h2&#39;);
  4.     new_header.innerHTML = header.innerHTML;
  6.     header.parentNode.replaceChild(new_header, header);
  7. }

<!-- language: lang-html -->

  1. &lt;h1&gt;不要更改这个&lt;/h1&gt;
  2. &lt;div class=&quot;the-class&quot;&gt;
  3.   &lt;h1&gt;用 h2 替换这个&lt;/h1&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

这将替换所有 .the-class 内的任何位置的 h1 元素

英文:

You can use querySelector and use a proper CSS selector to match only &lt;h1&gt; elements inside .the-class:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

  1. for (let header of document.querySelectorAll(&#39;.the-class h1&#39;)) {
  2.     // I gave these variables real names, very good practice
  3.     var new_header = document.createElement(&#39;h2&#39;);
  4.     new_header.innerHTML = header.innerHTML;
  6.     header.parentNode.replaceChild(new_header, header);
  7. }

<!-- language: lang-html -->

  1. &lt;h1&gt;Don&#39;t change this&lt;/h1&gt;
  2. &lt;div class=&quot;the-class&quot;&gt;
  3.   &lt;h1&gt;Replace this with h2&lt;/h1&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

This will replace all h1 elements anywhere inside .the-class

答案2

得分: 0

[编辑 2023/04/18] 这是一个实用函数，可以更改任何标签的名称，同时保留原始标签的属性。它替换了outerHTML中的标签名称部分。

注意: 浏览器会自动替换结束标记。

另请参阅。


  1. /* 
  2.    简化的替代方案：一个通用函数
  3.    通过更改其outerHTML来更改元素的标签名称。
  4.    这保留了原始元素的属性/类名
  5. */
  6. const replaceElem = (elem, nwTag) => 
  7.   elem.outerHTML = elem.outerHTML
  8.     .replace(RegExp(`^<${elem.tagName}`, `i`), `<${nwTag}`);
  10. document.querySelectorAll(`.the-class h1`)
  11.    .forEach(h1 => replaceElem(h1, `h2`));
  12. document.querySelectorAll(`div`)
  13.   .forEach(div => replaceElem(div, `span`));
  15. /* 
  16. original snippet
  17. -----------------
  18. document.querySelectorAll(`.the-class h1`)
  19.   .forEach(h1 => h1.replaceWith( Object.assign(
  20.     document.createElement(`h2`), {
  21.       innerHTML: h1.innerHTML,
  22.       className: [...(h1.classList || [])].join(` `)
  23.     } ) ) );
  24. */

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!

  2. <details>
  3. <summary>英文:</summary>
  5. [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`.
  7. &lt;b&gt;Note&lt;/b&gt;: the browser automagically replaces the end tag.
  9. [See also](https://stackblitz.com/edit/js-8nifvy?file=index.js).
  11. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  13. &lt;!-- language: lang-js --&gt;
  15.     /* 
  16.        Simplified alternative: a generic function 
  17.        to change the tag name of an element by 
  18.        changing its outerHTML.
  19.        This conserves attributes/classNames of the
  20.        original element
  21.     */
  22.     const replaceElem = (elem, nwTag) =&gt; 
  23.       elem.outerHTML = elem.outerHTML
  24.         .replace(RegExp(`^&lt;${elem.tagName}`, `i`), `&lt;${nwTag}`);
  26.     document.querySelectorAll(`.the-class h1`)
  27.        .forEach(h1 =&gt; replaceElem(h1, `h2`));
  28.     document.querySelectorAll(`div`)
  29.       .forEach(div =&gt; replaceElem(div, `span`));
  31.     /* 
  32.     original snippet
  33.     -----------------
  34.     document.querySelectorAll(`.the-class h1`)
  35.       .forEach(h1 =&gt; h1.replaceWith( Object.assign(
  36.         document.createElement(`h2`), {
  37.           innerHTML: h1.innerHTML,
  38.           className: [...(h1.classList || [])].join(` `)
  39.         } ) ) );
  40.     */
  42. &lt;!-- language: lang-css --&gt;
  44.     body {
  45.       font: normal 12px/15px verdana, arial, sans-serif;
  46.     }
  47.     h1 { color: red; }
  48.     h2.italic { font-style: italic; }
  49.     h2.blue { color: blue; }
  50.     h2[data-header] { background-color: #eee; }
  51.     span.the-class { display: block; }
  52.     span.the-class::after {
  53.       content: &#39;Once I was &lt;div&gt; &#128532;&#39;;
  54.       font-size: 1.2rem;
  55.       margin-left: 2rem;
  56.     }
  58. &lt;!-- language: lang-html --&gt;
  60.     &lt;h1&gt;Don&#39;t change this&lt;/h1&gt;
  61.     &lt;div class=&quot;the-class&quot;&gt;
  62.       &lt;h1&gt;Replace this with h2&lt;/h1&gt;
  63.     &lt;/div&gt;
  64.     &lt;div class=&quot;the-class&quot;&gt;
  65.       &lt;h1 class=&quot;blue&quot; data-header=&quot;2&quot;&gt;Replace this with h2 too&lt;/h1&gt;
  66.     &lt;/div&gt;
  67.     &lt;div class=&quot;the-class&quot;&gt;
  68.       &lt;h1 class=&quot;italic blue&quot;&gt;He! I want to be replaced too!&lt;/h1&gt;
  69.     &lt;/div&gt;
  71. &lt;!-- end snippet --&gt;
  75. </details>
  79. # 答案3
  80. **得分**: 0
  82. 选择所有类内的 h1，用 createElement 创建新的 h2，用 replaceWith 进行交换。
  84. ```js
  85. document.querySelectorAll('.the-class h1').forEach(h1 => {
  86.   const h2 = document.createElement('h2');
  87.   h2.innerHTML = h1.innerHTML;
  88.   h1.replaceWith(h2);
  89. });
  1. h1 {
  2.   color: red;
  3. }
  5. h2 {
  6.   color: blue;
  7. }
  1. <h1>不要改变这个</h1>
  2. <div class="the-class">
  3.   <h1>用 h2 替换这个</h1>
  4. </div>
  5. <div class="the-class">
  6.   <h1>并用 h2 替换这个</h1>
  7. </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 -->

  1. document.querySelectorAll(&#39;.the-class h1&#39;).forEach(h1 =&gt; { 
  2.   const h2 = document.createElement(&#39;h2&#39;);
  3.   h2.innerHTML = h1.innerHTML;
  4.   h1.replaceWith(h2);
  5. });

<!-- language: lang-css -->

  1. h1 {
  2.   color: red;
  3. }
  5. h2 {
  6.   color: blue;
  7. }

<!-- language: lang-html -->

  1. &lt;h1&gt;Don&#39;t change this&lt;/h1&gt;
  2. &lt;div class=&quot;the-class&quot;&gt;
  3.   &lt;h1&gt;Replace this with h2&lt;/h1&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;the-class&quot;&gt;
  6.   &lt;h1&gt;And Replace this with h2&lt;/h1&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 19:25:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76034638.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定