首页 > 编程语言 >如何通过javascript自动增加markdown h1的文本内容?

如何通过javascript自动增加markdown h1的文本内容?

时间:2024-06-09 11:33:19浏览次数:17  
标签:markdown h1 tag slice javascript 文本 textContent

背景

希望美化博客园博客,至少不希望文本那么密集地显示,而且想自动在 headline插入表情符号,自动进行目录和文本缩进等等。

问题

如何通过javascript自动增加markdown h1的文本内容?

方案

在html中增加如下js脚本即可。


document.addEventListener("DOMContentLoaded", function() {

var h1Tags = document.querySelectorAll('h1');

h1Tags.forEach(function(tag) {

if (tag.textContent.length >= 3) {

tag.textContent = tag.textContent.slice(0, 2) + "新内容" + tag.textContent.slice(2);

}

});

});

其中,更换tag.textContent.slice() 参数的值可以更换插入文本的位置。

更换document.querySelectorALL()参数的值可以替换为查找其他html元素。

评价

通过该js脚本,可以对html的元素自定义内容的插入,从而为markdown风格的自定义服务。

参考

  • GPT3.5-turbo

标签:markdown,h1,tag,slice,javascript,文本,textContent
From: https://www.cnblogs.com/Laziko/p/18239383

相关文章

  • 欢迎使用Markdown编辑器
    欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我......
  • Markdown箭头的输入方法
    文章目录普通箭头长箭头普通箭头MarkDown(需要在前后各添加一个$)箭头形状\uparrow↑\uparrow↑\Uparrow......
  • 如何在markdown中换行?
    ......
  • JavaScript 语法 随记(打印语句)
    JavaScript语法随记(打印语句)window.alert("Hello,World!-----1"),//弹出框 内显示内容document.write("Hello,World!-----2");//在新开网页上面显示内容console.log("Hello,World!--------3");//在控制台显示  (常用)console.error("Hello,World!-......
  • JavaScript:从基础到进阶的全面介绍
    JavaScript:从基础到进阶的全面介绍JavaScript(简称JS)是一种广泛用于Web开发的编程语言。它是一种轻量级的、解释型或即时编译的语言,具有函数优先的特点。JS最初是为了实现网页的动态效果而设计的,如今已发展成为前端开发、服务器端开发、移动开发等多个领域的重要工具。本文......
  • Javascript全解(基础篇)
     语法与数据类型语法var\let\constvar声明一个变量,可选初始化一个值。let声明一个块作用域的局部变量,可选初始化一个值。const声明一个块作用域的只读常量。用 var 或 let 语句声明的变量,如果没有赋初始值,则其值为 undefined。如果访问一个未声明的变量会导致......
  • JavaScript html css 字符串对象
    字符串对象字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。length属性作用:获取字符串长度示例:<spanstyle="background-color:#f8f8f8"><spanstyle="color:#333333"><spanstyle="color:#770088">let</span><spanstyle=......
  • Markdown 常用数学符号和语法
    GreekandHebrewlettersSymbolCommandSymbolCommandSymbolCommandSymbolCommandSymbolCommandSymbolCommandα\alphaκ\kappaψ\psiϜ\digammaΔ\DeltaΘ\Thetaβ\betaλ\lambdaρ\rhoε\varepsilonΓ\GammaΥ\Upsilonχ\......
  • 【JavaScript脚本宇宙】通知新风尚:打造互动性十足的Web提示系统
    定制通知体验:深入了解JavaScript通知库前言在现代web开发中,通知库扮演着至关重要的角色,它们为用户界面的交互性和用户体验提供了关键支持。本文将介绍一些常用的JavaScript通知库,从简单实用到高度定制化各有特色,帮助开发者在项目中轻松实现各种通知功能。欢迎订阅专栏:Ja......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(河南平顶山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......