<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
span { background:yellow; }
</style>

</head>

<body>

<input type="text" />

<input type="button" value="替换" />

<p>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />
2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>

<script>
var aInp = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];

aInp[2].onclick = function () {
    var str = aInp[0].value;            // '妙味'
    
    if (!str)return;
    
    oP.innerHTML = oP.innerHTML.split(str).join('<span>'+str+'</span>');
};

</script>

</body>
</html>

JS-字符串操作，查找显示高亮的更多相关文章

  1. js字符串操作

    javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...

  2. js 字符串操作函数有哪些

    js 字符串操作函数有哪些 一.总结 一句话总结:js字符串函数都是字符串对象的方法,是通过调用字符串方法的方式调用,和java,php里面不一样. 1.字符串替换函数怎么用? 这里的正则表示是加双引 ...

  3. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  4. js字符串操作总结

    字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  5. js字符串操作函数

    js字符串函数 JS自带函数 concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world&quo ...

  6. js字符串操作总结(必看篇)

    本文链接: https://www.jb51.net/article/97915.htm 字符方法 <!DOCTYPE html> <html lang="en" ...

  7. javascript中字符串常用操作总结、JS字符串操作大全

    字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温 ...

  8. JS字符串操作大全

    String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟其他语言有些不 ...

  9. js--javascript中字符串常用操作总结、JS字符串操作大全

    字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温 ...

随机推荐

  1. 第四周psp

    10号 类别c 内容c 开始时间s 结束e 中断I 净时间T GUI 查资料 12:10 12:40 0m 30m GUI 安装QT 19:10 21:00 20m 90m GUI 学习QT 23:0 ...

  2. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  3. angular 的ng-view，ngrouter

    通过ng-view和ngRouter控制页面显示内容: html: <body ng-app="AngularStore"> <div class="c ...

  4. Windows程序设计(第五版)学习：第四章 文本输出

    第四章 文本输出 1,客户区:整个应用程序窗口中没有被标题栏.边框.菜单栏.工具栏.状态栏和滚动条占用的区域.简而言之,客户区就是窗口中程序可以在上面绘制并向用户传达可视化信息的区域.   2,大多数 ...

  5. [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

    [转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...

  6. Python 2.7_Second_try_爬取阳光电影网_获取电影下载地址并写入文件 20161207

    1.昨天文章http://www.cnblogs.com/Mr-Cxy/p/6139705.html 是获取电影网站主菜单 然后获取每个菜单下的电影url  2.今天是对电影url 进行再次解析获取下 ...

  7. I can connect to an FTP site but I can't list or transfer files.

    原文 FTP sessions use two network connections: The control channel is for user authentication and send ...

  8. javascript 函数执行上下文

    在js里,每个函数都有一个执行的上下文,我们可以通过this来访问. 如: 全局函数 function test(){ var local = this; } 我们发现local等于window(do ...

  9. MongoDB-JAVA-Driver 3.2版本常用代码全整理(1) - 增删改

    MongoDB的3.x版本java驱动相对2.x做了全新的设计,类库和使用方法上有很大区别.例如用Document替换BasicDBObject.通过Builders类构建Bson替代直接输入$命令等 ...

  10. GWT资料收集

    1.别人的GWT笔记 http://www.blogjava.net/peacess/archive/2007/08/06/84950.html 2.GWT系统类库参考手册 http://www.bo ...