首页 > 其他分享 >如何利用JS设置“背景-问题-方案-评价-参考”的前置符号?

如何利用JS设置“背景-问题-方案-评价-参考”的前置符号?

时间:2024-06-09 11:54:39浏览次数:8  
标签:function 前置 符号 textContent JS tag slice includes document

背景

如何通过javascript自动增加markdown h1的文本内容? 中已经有了插入文本的脚本。但是我希望“背景”“问题”这些标题显示不同的前置符号来适应不同的内容主题。

问题

怎么分别设置h1在不同文本内容情形下的前置符号?

方案

在原有的基础上稍加修改,增加一些if语句即可。

<script>
document.addEventListener("DOMContentLoaded", function() {
  var h1Tags = document.querySelectorAll('h1');
  var h2Tags = document.querySelectorAll('h2');
  var h3Tags = document.querySelectorAll('h3');
  h1Tags.forEach(function(tag) {

       if (tag.textContent.includes("背景")) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);
    }
       if (tag.textContent.includes("问题")) {
      tag.textContent = tag.textContent.slice(0,0) + "❓" + tag.textContent.slice(0);
    }
       if (tag.textContent.includes("方案")) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);
    }
       if (tag.textContent.includes("评价")) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);
    }
        if (tag.textContent.includes("参考")) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);
    }
  });
    h2Tags.forEach(function(tag) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);  
  });
    h3Tags.forEach(function(tag) {
      tag.textContent = tag.textContent.slice(0,0) + "" + tag.textContent.slice(0);  
  });
});
</script>

评价

这样就不用每个文档都写标题的前置符号,从而进一步分离写作在内容和形式上的工作。

参考

  • GPT3.5-trubo

标签:function,前置,符号,textContent,JS,tag,slice,includes,document
From: https://www.cnblogs.com/Laziko/p/18239410

相关文章

  • [Java] Mybatis向Mysql插入主副表JSON数据
    ......
  • 【计算机毕业设计】ssm711冀中工程技师校园网站设计与实现+jsp
    使用旧方法对冀中工程技师学院网站的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在冀中工程技师学院网站的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的冀中工程技师学院网站对字典管理、......
  • ​【JS重点知识04】JS执行机制(重点面试题)
     学前案例:console.log(111);setTimeout(function(){console.log(222);},1000)console.log(333);//输出结果:1111333222console.log(111);setTimeout(function(){console.log(222);},0)console.log(333);//输出结果:1113332221JS两种运行方式同......
  • js中-null不是基本类型
    在JavaScript中,`null`也不是基本类型(也称作原始类型或简单数据类型),但它被归类为一种特殊的对象类型。这是一个历史遗留问题,也是JavaScript语言设计上的一些独特之处。在早期版本的ECMAScript规范中,typeof操作符对`null`返回`"object"`,这导致很多人误以为`null`是一种对......
  • Markdown 常用数学符号和语法
    GreekandHebrewlettersSymbolCommandSymbolCommandSymbolCommandSymbolCommandSymbolCommandSymbolCommandα\alphaκ\kappaψ\psiϜ\digammaΔ\DeltaΘ\Thetaβ\betaλ\lambdaρ\rhoε\varepsilonΓ\GammaΥ\Upsilonχ\......
  • 第二章:Three.js 环境搭建
    第二章:环境搭建本章将详细介绍如何搭建Three.js的开发环境,包括安装Node.js和npm,配置Three.js项目,以及在HTML中引入Three.js。2.1安装Node.js和npmNode.js是一个开源的、跨平台的JavaScript运行时环境。npm是Node.js的包管理工具,用于安装和管理JavaS......
  • 第一章:Three.js 简介
    1.1什么是Three.jsThree.js是一个开源的JavaScript库,用于在Web浏览器中创建和显示动画3D计算机图形。它建立在WebGL之上,简化了复杂的3D渲染过程,使开发者能够轻松创建丰富的3D图形和交互效果。Three.js的特点包括:高效的3D渲染:Three.js使用WebGL提供......
  • uniapp 中renderjs的使用
    1.cs.vue<template><viewclass="demo"><!--text是renderjsmodule名称--> <view>{{data}}</view><button@click="text.onClick2"> 按钮2 </button> ......
  • html+CSS+js部分基础运用13
    一、三级联动效果如下图所示:图1三级联动二、设计江苏福彩投注站彩票投注助手编程实现江苏福彩投注站彩票投注助手,页面布局效果如图2所示。图2福彩投注站彩票助手页面功能要求如下:单击“机选1注”、“机选5注”或“机选10注”按钮时,能够随机产生相应条数的数据。......
  • html+CSS+js部分基础运用15
    1、完成输入框内容的实时反向输出。2、银行账户余额变动自动通知项目。设计要求:单击按钮后,余额按照输入框的数额减少,同时将按钮式的提示信息(金额)同步改变。利用侦听属性实现余额发生变化时发出提示信息,同时记录每次支出明细,每笔记录包含支取次数,支取金额、余额等信息。3......