替换 HTML 页面上所有出现的子字符串而不使用 replaceAll 并将大小写保持为原始
Posted
技术标签:
【中文标题】替换 HTML 页面上所有出现的子字符串而不使用 replaceAll 并将大小写保持为原始【英文标题】：Replace all occurrences of the substring on HTML page without replaceAll and keep case as original 【发布时间】：2021-10-17 15:28:13 【问题描述】：我试图在不使用replaceAll 的情况下替换从输入中给出的所有出现的子字符串，并将大小写保持为原始匹配。这就是我现在所拥有的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input class="searchInput" type="text">
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum adipisci a quia quas reiciendis. Consectetur excepturi iusto, corporis sapiente cupiditate quae sequi nobis voluptatibus ullam cum suscipit quibusdam quo maiores.</p>
<script type="text/javascript">
var searchInput = document.querySelector('.searchInput')
var text = document.querySelector('#text')
function displayMatches(e)
var regex = new RegExp(e.target.value, 'ig')
var response = text.innerText.replace(regex, function(match)
return text.innerText.split(regex).join("<span style='background-color: yellow;'>" + match + "</span>")
)
text.innerHTML = response
searchInput.addEventListener('change', displayMatches)
searchInput.addEventListener('keyup', displayMatches)
</script>
</body>
</html>
但它没有按预期工作。我使用replaceAll 实现了我想要的，如下所示：
var searchInput = document.querySelector('.searchInput')
var text = document.querySelector('#text')
function displayMatches(e)
var regex = new RegExp(e.target.value, 'ig')
var response = text.innerText.replaceAll(regex, function(match)
return "<span style='background-color: yellow;'>" + match + "</span>"
)
text.innerHTML = response
searchInput.addEventListener('change', displayMatches)
searchInput.addEventListener('keyup', displayMatches)
但我想知道如果没有replaceAll for cross-browser reasons 和split 'n join 或其他东西是否可以实现。
编辑：
它以某种方式与replace：https://jsfiddle.net/21txy05u/一起工作
【问题讨论】：
【参考方案1】：根据我的理解，我制作了这个小脚本，检查一下： 我所做的是将第一场比赛显示为黄色，其余比赛显示为红色 出于某种原因，当他们尝试搜索“..”或更多代码时，代码会中断，但其余的工作正常
function search()
let search=document.querySelector("#search").value
let text=document.querySelector("#text")
text.innerHTML=text.innerText
let reg=new RegExp(((search.indexOf(".")>-1)?"\\"+search:search),"ig")
let aux=text.innerText.split(reg)
if(aux.length>1)
text.innerHTML=aux[0]+"<span style='background-color: yellow;'>" +search+ "</span>"+aux.splice(1).join("<span style='background-color: red;color:white;'>" +search+ "</span>")
<input type="text" placeholder="Search" id="search" onkeyup="search()">
<p id="text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda vero nobis impedit, suscipit ab voluptates iste voluptas tempora! Tenetur enim, unde corporis cupiditate quisquam doloribus molestiae. Iste ipsam nihil porro?
</p>【讨论】：
【参考方案2】：您可以使用与String:split具有相同百分比兼容性的String:replace
【讨论】：
以上是关于替换 HTML 页面上所有出现的子字符串而不使用 replaceAll 并将大小写保持为原始的主要内容，如果未能解决你的问题，请参考以下文章