扫码关注官方订阅号
比如我有如下html代码
微软Windows 10操作系统
我希望js执行后把他变成这样
该如何实现呢?
人生最曼妙的风景,竟是内心的淡定与从容!
以下代码效率不高,但基本原理大概如此,你自己调试一下吧:
var str = $('#target p').html(); var result = ''; var chinese_flag = true; for (var i=0; i<str.length; i++) { if (str.charCodeAt(i) > 256) { if (chinese_flag) { result += str.charAt(i); } else { chinese_flag = true; result += '</span>' + str.charAt(i); } } else { if (chinese_flag) { chinese_flag = false; result += '<span class="myclass">' + str.charAt(i); } else { result += str.charAt(i); } } } $('#target p').html(result);
function replaceTextWithSpanWrap(id, tagName, className) { Array.prototype .slice .call(document.getElementById(id).getElementsByTagName(tagName)) .map(function(node) { node.innerHTML = node.innerHTML.replace(/[A-Za-z0-9\s]+/g, function(text) { return '<span class="' + className + '">' + text + '</span>'; }); }); } replaceTextWithSpanWrap('target', 'p', 'myclass');
分开来看:1.找到所有的p标签2.正则判断有无数字或字母出现3.若有的话则用str.replace()函数替换每个符合的部分,前后加<span class="myClass"> </span>
p
str.replace()
<span class="myClass"> </span>
下面的的代码是可以将span渲染出来的,如不需要渲染,将最后的innerHTML改为textContent即可
innerHTML
textContent
(function addSpans() { var paragraphs = document.getElementsByTagName("p"), temp; for (var i = 0, l = paragraphs.length; i < l; i++) { if (paragraphs[i].textContent.match(/[a-zA-Z0-9]+/)) { temp = paragraphs[i].textContent.replace(/[a-zA-Z0-9]+/g, function(word) { return '<span class="myClass">' + word + "</span>"; }); paragraphs[i].innerHTML = temp; } } })();
参考资料:str.replace()函数的用法http://www.w3school.com.cn/jsref/jsref_replace.asp
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
以下代码效率不高,但基本原理大概如此,你自己调试一下吧:
分开来看:
1.找到所有的
p标签2.正则判断有无数字或字母出现
3.若有的话则用
str.replace()函数替换每个符合的部分,前后加<span class="myClass"> </span>下面的的代码是可以将span渲染出来的,如不需要渲染,将最后的
innerHTML改为textContent即可参考资料:
str.replace()函数的用法http://www.w3school.com.cn/jsref/jsref_replace.asp