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动态加载javascript以减少服务器压力
Oct 29 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
小程序实现搜索框功能
Mar 26 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php处理复杂xml数据示例
2016/07/11 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
浅谈Vue.js
2017/03/02 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python切片索引用法示例
2018/05/15 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python求最大值最小值方法总结
2019/06/25 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
社区工作者先进事迹
2014/01/18 职场文书
户外宣传策划方案
2014/05/25 职场文书
十周年庆典策划方案
2014/06/03 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
服务整改报告
2014/11/06 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
获奖感言怎么写
2015/07/31 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
大学学生会竞选稿
2015/11/19 职场文书