如何遍历文本内容
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何遍历文本内容相关的知识,希望对你有一定的参考价值。
M试图获取搜索输入的值,并试图遍历一行文本,例如00:0000:01你好吗?并且无法从中选择匹配的输入值(使用html,css和javscript)。需要在内容循环和突出显示匹配值时提供帮助。
答案
处理小写,大写和首字母大写搜索词的Vanilla JS解决方案:
let inputs = "lorem culpa ullamco";
let searchWords = inputs.split(' ');
let res = document.body.querySelector('#textToHighlight');
let firstLetterToUpperCase = function(str)
return str.charAt(0).toUpperCase() + str.slice(1);
searchWords.forEach( w =>
let tag = s: "<code>", e: "</code>";
let regexp = new RegExp(w, "g");
res.innerHTML = res.innerHTML.replace(regexp, tag.s + w + tag.e);
regexp = new RegExp(w.toUpperCase(), "g");
res.innerHTML = res.innerHTML.replace(regexp, tag.s + w.toUpperCase() + tag.e);
regexp = new RegExp(w.toLowerCase(), "g");
res.innerHTML = res.innerHTML.replace(regexp, tag.s + w.toLowerCase() + tag.e);
regexp = new RegExp(firstLetterToUpperCase(w), "g");
res.innerHTML = res.innerHTML.replace(regexp, tag.s + firstLetterToUpperCase(w) + tag.e);
);
code
color: white;
background: red;
<div id="textToHighlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
以上是关于如何遍历文本内容的主要内容,如果未能解决你的问题,请参考以下文章