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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
DIV菜单层实现代码
Nov 19 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
解决Python requests 报错方法集锦
2017/03/19 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
cf战队收人广告词
2014/03/14 职场文书
微信搭讪开场白
2015/05/28 职场文书
复兴之路展览观后感
2015/06/02 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Python jiaba库的使用详解
2021/11/23 Python