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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
javascript贪吃蛇游戏设计与实现
Sep 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函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
小程序如何支持使用 async/await详解
2019/09/12 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python collections模块的使用
2020/10/16 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
小学生综合素质评语
2014/04/23 职场文书
物业保安岗位职责
2014/07/02 职场文书
师范生见习报告
2014/10/31 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
python flask开发的简单基金查询工具
2021/06/02 Python
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android