如何使用正则表达式清理来自 HTML 的 for-in-loop？
How to use regex to sanitize a for-in-loop from HTML?
我有以下应用程序可以搜索您键入的以一个 space 分隔的单词。您可以键入每个单词并按回车键，它会在页面中突出显示您的所有单词。唯一的问题是它没有转义 HTML 内容，因此如果您键入任何字符，例如 < > class="" strong bold 等......它会将它们保存到 txt 变量中，然后开始乘以 HTML 输入中每个单词的每个循环。我不需要解决这个错误，而且我知道它与我的 term 和 txt 变量有关。但也许你能看到我看不到的东西。
var highlightRe = /<span class="highlight">(.*?)<\/span>/g,
highlightHtml = '<span class="highlight"></span>';
$(function() {
/////////////////////////when search value changes
$('#search').change(function() {
////////////////////////////grab #search value and split it into array
var str = document.getElementById('search').value;
var res = str.split(" ");
//////////////////replace all html text with
var txt = $('#txt').html().replace(highlightRe,'');
///////// x = index of array res (array of key words to search in txt)
var x=0;
//////////////check if each word exists in txt and highlight it
for (x in res) {
var term = res[x];
////////////////////////////if I sanitize term from HTML content here. Then there is no bugs but then I cannot use the letters included inside HTML tags
if(term !== '') {
txt = txt.replace(new RegExp('(' + term + ')', 'gi'), highlightHtml);
}
}
$('#txt').html(txt);
});
});
.highlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>innosabi challenge - Highlight</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<body>
<main role="main" class="container">
<div class="container">
<input placeholder="enter words here" id="search" type="text">
<div id="txt">
<h1>Perceived end knowledge certainly day sweetness why cordially</h1>
<p>As collected deficient objection by it discovery sincerity curiosity. Quiet decay who round three
world whole has mrs man. Built the china there tried jokes which gay why. Assure in adieus wicket it
is. But spoke round point and one joy. Offending her moonlight men sweetness see unwilling.
Often of it tears whole oh balls share an.</p>
<p>Unpacked reserved sir offering <strong>bed judgment may and quitting speaking</strong>. Is do be
improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no.
Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.</p>
<p>Behaviour we improving at something to. Evil true high lady roof men had open. To
<b class="bold">projection</b> considered it precaution an melancholy or. Wound young you thing
worse along being ham. Dissimilar of favourable solicitude if sympathize middletons at. Forfeited
up if disposing perfectly in an eagerness perceived necessary. Belonging sir curiosity discovery
extremity yet forfeited prevailed own off. Travelling by introduced of mr terminated. Knew as miss
my high hope quit. In curiosity shameless dependent knowledge up.</p>
<p>Sudden she seeing garret far regard. <strike>By hardly it direct if pretty up regret</strike>.
Ability thought enquire settled prudent you sir. Or easy knew sold on well come year. Something
consulted age extremely end procuring. Collecting preference he inquietude projection me in by.
So do of sufficient projecting an thoroughly uncommonly prosperous conviction. Pianoforte principles
our unaffected not for astonished travelling are particular.</p>
<p>Situation admitting promotion at or to perceived be. Mr acuteness we as estimable enjoyment up.
An held late as felt know. Learn do allow solid to grave. Middleton suspicion age her attention.
Chiefly several bed its wishing. Is so moments on chamber pressed to. Doubtful yet way properly
answered humanity its desirous. Minuter believe service arrived civilly add all. Acuteness allowance
an at eagerness favourite in extensive exquisite ye.</p>
<p>Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease
one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something.
Snug soon he on plan in be dine some.</p>
<p>Husbands ask repeated resolved but laughter debating. She end cordial visitor noisier fat subject
general picture. Or if offering confined entrance no. Nay rapturous him see something residence.
Highly talked do so vulgar. Her use behaved spirits and natural attempt say feeling. Exquisite mr
incommode immediate he something ourselves it of. Law conduct yet chiefly beloved examine village
proceed.</p>
<p>Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find
read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed
merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.</p>
<p>The him father parish looked has sooner. Attachment frequently gay terminated son. You greater nay
use prudent placing. Passage to so distant behaved natural between do talking. Friends off her
windows painful. Still gay event you being think nay for. In three if aware he point it. Effects
warrant me by no on feeling settled resolve.</p>
</div>
</div>
</main>
</body>
如评论中所述，在这一行中使用 text() 而不是 html()：
var txt = $('#txt').text().replace(highlightRe,'');
我有以下应用程序可以搜索您键入的以一个 space 分隔的单词。您可以键入每个单词并按回车键，它会在页面中突出显示您的所有单词。唯一的问题是它没有转义 HTML 内容，因此如果您键入任何字符，例如 < > class="" strong bold 等......它会将它们保存到 txt 变量中，然后开始乘以 HTML 输入中每个单词的每个循环。我不需要解决这个错误，而且我知道它与我的 term 和 txt 变量有关。但也许你能看到我看不到的东西。
var highlightRe = /<span class="highlight">(.*?)<\/span>/g,
highlightHtml = '<span class="highlight"></span>';
$(function() {
/////////////////////////when search value changes
$('#search').change(function() {
////////////////////////////grab #search value and split it into array
var str = document.getElementById('search').value;
var res = str.split(" ");
//////////////////replace all html text with
var txt = $('#txt').html().replace(highlightRe,'');
///////// x = index of array res (array of key words to search in txt)
var x=0;
//////////////check if each word exists in txt and highlight it
for (x in res) {
var term = res[x];
////////////////////////////if I sanitize term from HTML content here. Then there is no bugs but then I cannot use the letters included inside HTML tags
if(term !== '') {
txt = txt.replace(new RegExp('(' + term + ')', 'gi'), highlightHtml);
}
}
$('#txt').html(txt);
});
});
.highlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>innosabi challenge - Highlight</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<body>
<main role="main" class="container">
<div class="container">
<input placeholder="enter words here" id="search" type="text">
<div id="txt">
<h1>Perceived end knowledge certainly day sweetness why cordially</h1>
<p>As collected deficient objection by it discovery sincerity curiosity. Quiet decay who round three
world whole has mrs man. Built the china there tried jokes which gay why. Assure in adieus wicket it
is. But spoke round point and one joy. Offending her moonlight men sweetness see unwilling.
Often of it tears whole oh balls share an.</p>
<p>Unpacked reserved sir offering <strong>bed judgment may and quitting speaking</strong>. Is do be
improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no.
Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.</p>
<p>Behaviour we improving at something to. Evil true high lady roof men had open. To
<b class="bold">projection</b> considered it precaution an melancholy or. Wound young you thing
worse along being ham. Dissimilar of favourable solicitude if sympathize middletons at. Forfeited
up if disposing perfectly in an eagerness perceived necessary. Belonging sir curiosity discovery
extremity yet forfeited prevailed own off. Travelling by introduced of mr terminated. Knew as miss
my high hope quit. In curiosity shameless dependent knowledge up.</p>
<p>Sudden she seeing garret far regard. <strike>By hardly it direct if pretty up regret</strike>.
Ability thought enquire settled prudent you sir. Or easy knew sold on well come year. Something
consulted age extremely end procuring. Collecting preference he inquietude projection me in by.
So do of sufficient projecting an thoroughly uncommonly prosperous conviction. Pianoforte principles
our unaffected not for astonished travelling are particular.</p>
<p>Situation admitting promotion at or to perceived be. Mr acuteness we as estimable enjoyment up.
An held late as felt know. Learn do allow solid to grave. Middleton suspicion age her attention.
Chiefly several bed its wishing. Is so moments on chamber pressed to. Doubtful yet way properly
answered humanity its desirous. Minuter believe service arrived civilly add all. Acuteness allowance
an at eagerness favourite in extensive exquisite ye.</p>
<p>Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease
one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something.
Snug soon he on plan in be dine some.</p>
<p>Husbands ask repeated resolved but laughter debating. She end cordial visitor noisier fat subject
general picture. Or if offering confined entrance no. Nay rapturous him see something residence.
Highly talked do so vulgar. Her use behaved spirits and natural attempt say feeling. Exquisite mr
incommode immediate he something ourselves it of. Law conduct yet chiefly beloved examine village
proceed.</p>
<p>Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find
read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed
merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.</p>
<p>The him father parish looked has sooner. Attachment frequently gay terminated son. You greater nay
use prudent placing. Passage to so distant behaved natural between do talking. Friends off her
windows painful. Still gay event you being think nay for. In three if aware he point it. Effects
warrant me by no on feeling settled resolve.</p>
</div>
</div>
</main>
</body>
如评论中所述，在这一行中使用 text() 而不是 html()：
var txt = $('#txt').text().replace(highlightRe,'');