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中的isXX系列
Aug 01 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 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
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
深入理解Django的中间件middleware
2018/03/14 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
详解python logging日志传输
2020/07/01 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
某公司面试题
2012/03/05 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Python中rapidjson参数校验实现
2021/07/25 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle