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常用对象的方法和属性小结
Jan 24 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python实现简单登陆流程的方法
2018/04/22 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python如何批量生成和调用变量
2020/11/21 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
教师实习自我鉴定
2013/12/14 职场文书
大四本科生的自我评价
2013/12/30 职场文书
给护士表扬信
2014/01/19 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
停课通知书
2015/04/24 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
利用javaScript处理常用事件详解
2021/04/14 Javascript