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 相关文章推荐
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JavaScript常用工具函数大全
May 06 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
smarty的保留变量问题
2008/10/23 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
python将回车作为输入内容的实例
2018/06/23 Python
Python列表list排列组合操作示例
2018/12/18 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
2013年入党人员的自我鉴定
2013/10/25 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
爽歪歪广告词
2014/03/20 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
授权收款委托书
2014/09/23 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
答辩状格式范本
2015/05/22 职场文书
python基础之匿名函数详解
2021/04/21 Python