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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
phpStorm2020 注册码
2020/09/17 PHP
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python怎么判断模块安装完成
2020/06/19 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
企业门卫岗位职责
2013/12/12 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
写自荐信三大法宝
2014/01/24 职场文书
自我鉴定书
2014/03/24 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技