JavaScript字符串对象(string)基本用法示例


Posted in Javascript onJanuary 18, 2017

本文实例讲述了JavaScript字符串对象(string)基本用法。分享给大家供大家参考,具体如下:

1.获取字符串的长度:

var s = "Hello world";
document.write("length:"+s.length);

2.为字符串添加各种样式,如:

var txt = "Some words";
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Link: " + txt.link("https://3water.com") + "</p>")

3.获取字符串中部分内容首次出现的位置:

var hw_text = "Hello world";
document.write(hw_text.indexOf("Hello")+"<br/>");
document.write(hw_text.indexOf("world")+"<br/>");
document.write(hw_text.indexOf("abc")+"<br/>");

4.内容替换:

var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))

效果图:

JavaScript字符串对象(string)基本用法示例

示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 字符串对象</title>
<head>
 <style>
  body {background-color:#e6e6e6}
 </style>
</head>
<body>
 <h3>(一)length属性:获取字符串的长度</h3>
 <p id="hw">Hello world, Hello javascript!</p>
 <script>
  var s = document.getElementById("hw").innerHTML;
  document.write("length:"+s.length);
 </script>
 <h3>(二)为字符串添加样式</h3>
 <p>对字符串调用样式的相关方法时,会自动拼接相应的html标签</p>
 <p id = "hw_02">some words</p>
 <button onclick="alertBig()">Call txt.big()</button>
 <script>
  var txt = document.getElementById("hw_02").innerHTML;
  document.write("<p>Big: " + txt.big() + "</p>")
  document.write("<p>Small: " + txt.small() + "</p>")
  document.write("<p>Bold: " + txt.bold() + "</p>")
  document.write("<p>Italic: " + txt.italics() + "</p>")
  document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
  document.write("<p>Fixed: " + txt.fixed() + "</p>")
  document.write("<p>Strike: " + txt.strike() + "</p>")
  document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
  document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
  document.write("<p>Link: " + txt.link("https://3water.com") + "</p>")
  function alertBig(){
   alert(txt.big());
  }
 </script>
 <h3>(三)indexOf方法:定位字符串中某一个指定的字符首次出现的位置</h3>
 <script>
  var hw_text = "Hello world";
  document.write(hw_text.indexOf("Hello")+"<br/>");
  document.write(hw_text.indexOf("world")+"<br/>");
  document.write(hw_text.indexOf("abc")+"<br/>");
 </script>
 <h3>(四)replace()方法:替换字符串中的部分内容</h3>
 <script>
  var str="Visit Microsoft!"
  document.write(str.replace(/Microsoft/,"3water"))
 </script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
You might like
php判断访问IP的方法
2015/06/19 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
基于Python log 的正确打开方式
2018/04/28 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
python 实现逻辑回归
2020/12/30 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
华为慧通笔试题
2016/04/22 面试题
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
感恩教育活动总结
2014/05/05 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
行政助理岗位职责
2015/02/10 职场文书
校本研修个人总结
2015/02/28 职场文书
公司员工离职感言
2015/08/03 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python