比如我有如下html代码
<div id="target">
<p>微软Windows 10操作系统</p>
</div>
我希望js执行后把他变成这样
<div id="target">
<p>微软<span class="myclass">Windows 10</span>操作系统</p>
</div>
该如何实现呢?
以下代码效率不高,但基本原理大概如此,你自己调试一下吧:
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);
分开来看:
1.找到所有的p
标签
2.正则判断有无数字或字母出现
3.若有的话则用str.replace()
函数替换每个符合的部分,前后加<span class="myClass"> </span>
下面的的代码是可以将span渲染出来的,如不需要渲染,将最后的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
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');