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 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
Jquery注册事件实现方法
May 18 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
python re的findall和finditer的区别详解
2020/11/15 Python
PyQt实现计数器的方法示例
2021/01/18 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
银行简历自我评价
2014/02/11 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2014年转正工作总结
2014/11/08 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
毕业设计工作总结
2015/08/14 职场文书