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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
你真的了解Python的random模块吗?
2017/12/12 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python实现GIF图倒放
2020/07/16 Python
七夕情人节促销方案
2014/06/07 职场文书
低碳环保口号
2014/06/12 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
高二数学教学反思
2016/02/18 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
从原生JavaScript到React深入理解
2022/07/23 Javascript