JavaScript String 字符串对象实例合集

news2024/10/5 17:24:28

文章目录

  • JavaScript String 字符串对象实例合集
    • 返回字符串的长度
    • 为字符串添加样式
    • 返回字符串中指定文本首次出现的位置 - indexOf()方法
    • 查找字符串中特定的字符,若找到,则返回该字符 - match() 方法
    • 替换字符串中的字符 - replace()


JavaScript String 字符串对象实例合集

在这里插入图片描述

返回字符串的长度

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var txt = "Hello World!";
document.write(txt.length);
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

为字符串添加样式

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var txt = "Hello World!";
document.write("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

返回字符串中指定文本首次出现的位置 - indexOf()方法

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮来定位指定文本首次出现的位置。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str="Hello world, welcome to the universe.";
	var n=str.indexOf("welcome");
	document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

查找字符串中特定的字符,若找到,则返回该字符 - match() 方法

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("worlld") + "<br>");
document.write(str.match("world!"));
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

替换字符串中的字符 - replace()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p>单击按钮将段落中“Microsoft”替换成“W3CSchool”:</p>
<p id="demo">Visit Microsoft!</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str=document.getElementById("demo").innerHTML; 
	var n=str.replace("Microsoft","W3CSchool");
	document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/401771.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1/4车、1/2车、整车悬架PID控制仿真合集

目录 前言 1. 1/4悬架系统 1.1数学模型 1.2仿真分析 2. 1/2悬架系统 2.1数学模型 2.2仿真模型 2.3仿真分析 3. 整车悬架系统 3.1数学模型 3.2仿真分析 参考文献 前言 前面几篇文章介绍了LQR、SkyHook、H2/H∞控制&#xff0c;接下来会继续介绍滑模、反步法、MPC、…

Web漏洞-SSRF漏洞(详细)

SSRF漏洞介绍&#xff1a;SSRF(Server-Side Request Forgery&#xff09;&#xff1a;服务器端请求伪造&#xff0c;该漏洞通常由攻击者构造的请求传递给服务端&#xff0c;服务器端对传回的请求未作特殊处理直接执行而造成的。一般情况下&#xff0c;SSRF攻击的目标是从外网无…

AidLux AI应用案例悬赏选题 | 纺织品表面瑕疵检测

AidLux AI 应用案例悬赏征集活动 AidLux AI 应用案例悬赏征集活动是AidLux推出的AI应用案例项目合作模式&#xff0c;悬赏选题将会持续更新。目前上新的选题涉及泛边缘、机器人、工业检测、车载等领域&#xff0c;内容涵盖智慧零售、智慧社区、智慧交通、智慧农业、智能家居等…

荧光染料IR-825 NHS,IR825 NHS ester,IR825 SE,IR-825 活性酯

IR825 NHS理论分析&#xff1a;中文名&#xff1a;新吲哚菁绿-琥珀酰亚胺酯&#xff0c;IR-825 琥珀酰亚胺酯&#xff0c;IR-825 活性酯英文名&#xff1a;IR825 NHS&#xff0c;IR-825 NHS&#xff0c;IR825 NHS ester&#xff0c;IR825 SECAS号&#xff1a;N/AIR825 NHS产品详…

JavaScript 高级实例集合

文章目录JavaScript 高级实例集合创建一个欢迎 cookie简单的计时另一个简单的计时在一个无穷循环中的计时事件带有停止按钮的无穷循环中的计时事件使用计时事件制作的钟表创建对象的实例创建用于对象的模板JavaScript 高级实例集合 创建一个欢迎 cookie 源码 <!DOCTYPE ht…

Spring源码阅读(基础)

第一章&#xff1a;bean的元数据 1.bean的注入方式&#xff1a; 1.1 xml文件 1.2 注解 Component&#xff08;自己写的类才能在上面加这些注解&#xff09; 1.3配置类&#xff1a; Configuration 注入第三方数据源之类 1.4 import注解 &#xff08;引用了Myselector类下…

1/4车、1/2车、整车悬架模糊PID控制仿真合集

目录 前言 1. 1/4悬架系统 1.1数学模型 1.2仿真分析 2. 1/2悬架系统 2.1数学模型 2.2仿真模型 2.3仿真分析 3. 整车悬架系统 3.1数学模型 3.2仿真分析 4.总结 前言 前面几篇文章介绍了LQR、SkyHook、H2/H∞、PID控制&#xff0c;接下来会继续介绍滑模、反步法、M…

个性化营销:您需要知道的信息

个性化营销在现代企业中风靡一时。我们将剖析您需要了解的有关个性化营销的信息&#xff0c;一起来了解一下吧。 什么是个性化营销&#xff1f; 个性化营销是一种一对一营销形式&#xff0c;它使用实时用户数据和分析来传递品牌信息并针对特定潜在客户。 它与传统营销不同&…

【教学典型案例】23.部分服务总是频繁出现掉线情况

目录一&#xff1a;背景介绍问题描述解决二&#xff1a;问题分析过程解决过程设计到的知识1、nacos的data目录作用。2、nacos data目下的protocol目录3、nacos ip混乱问题三&#xff1a;总结一&#xff1a;背景介绍 问题描述 因为某些特殊原因需要把nacos迁移到另一个版本的n…

Day913.反向代理和网关是什么关系 -SpringBoot与K8s云原生微服务实践

反向代理和网关是什么关系 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于反向代理和网关是什么关系的内容。 一、反向代理 反向代理 是一种网络技术&#xff0c;用于将客户端的请求转发到一个或多个服务器上&#xff0c;并将响应返回给客户端。与正向代理不同&am…

自动驾驶控制概况

文章目录1. 第一章行为决策在自动驾驶系统架构中的位置2. 路径跟踪控制的种类2.1 基于自行车模型的路径跟踪控制算法2.1.1 纯跟踪控制&#xff08;Pure Pursuit&#xff09;算法2.1.2 后轮反馈控制算法&#xff08;Rear wheel feedback&#xff09;2.1.3前轮反馈控制算法&#…

java面试-java基础

char 变量能不能存贮一个中文汉字&#xff1f;为什么&#xff1f; char 变量可以存贮一个汉字&#xff0c;因为 Java 中使用的默认编码是 Unicode &#xff0c;一个 char 类型占 2 个字节&#xff08;16 bit&#xff09;&#xff0c;一个汉字是2个字节&#xff0c;所以放一个中…

< JavaScript小技巧:Array构造函数妙用 >

文章目录&#x1f449; Array构造函数 - 基本概念&#x1f449; Array函数技巧用法1. Array.of()2. Array.from()3. Array.reduce()4. (Array | String).includes()5. Array.at()6. Array.flat()7. Array.findIndex()&#x1f4c3; 参考文献往期内容 &#x1f4a8;今天这篇文章…

K8s:通过 Kubeshark 体验 大白鲨(Wireshark)/TCPDump 监控 Kubernetes 集群

写在前面 分享一个 k8s 集群流量查看器很轻量的一个工具&#xff0c;监控方便博文内容涉及&#xff1a; Kubeshark 简单介绍Windows、Linux 下载运行监控DemoKubeshark 特性功能介绍 理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。…

【强化学习】强化学习数学基础:值函数近似

值函数近似Value Function ApproximationMotivating examples: curve fittingAlgorithm for state value estimationObjective functionOptimization algorithmsSelection of function approximatorsIllustrative examplesSummary of the storyTheoretical analysisSarsa with …

【springboot】springboot介绍

学习资料 SpringBoot 语雀 (yuque.com)【尚硅谷】SpringBoot2零基础入门教程&#xff08;spring boot2干货满满&#xff09;_哔哩哔哩_bilibiliSpringBoot2核心技术与响应式编程: SpringBoot2核心技术与响应式编程 (gitee.com) Spring 和Springboot 1、Spring能做什么 1.1…

STM32F1开发实例-振动传感器(机械)

振动(敲击)传感器 振动无处不在&#xff0c;有声音就有振动&#xff0c;哒哒的脚步是匆匆的过客&#xff0c;沙沙的夜雨是暗夜的忧伤。那你知道理科工程男是如何理解振动的吗&#xff1f;今天我们就来讲一讲本节的主角&#xff1a;最简单的机械式振动传感器。 下图即为振动传…

第18天-商城业务(商品检索服务,基于Elastic Search完成商品检索)

1.构建商品检索页面 1.1.引入依赖 <!-- thymeleaf模板引擎 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- 热更新 --><…

Revit开洞问题:结构专业开洞口剖面显示及一键开洞

一、Revit中关于结构专业开洞口剖面显示问题 Revit作业的时候&#xff0c;我们不仅只为了一个最后的三维立体模型,我们需要的是一个符合国家以及本院制图标准的一个出图样式,这时候就会出现各种各样的显示问题&#xff0c;本期就一个结构专业开洞显示问题&#xff0c;跟大家一起…

【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

文章目录一、背景位置-长度值设置二、背景位置-长度值方位值同时设置三、完整代码示例一、背景位置-长度值设置 长度值设置 效果展示 : 设置背景位置为具体值 10px 50px : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 10 像素 , y 轴方向 50 像素 ; 在水平方向上 ,…