javascript - 如何使用正则表达式清理 HTML 中的 for 循环？-6ren

javascript - 如何使用正则表达式清理 HTML 中的 for 循环？

转载作者：行者123 更新时间：2023-12-01 01:09:47

我有以下应用程序，可以搜索您输入的以空格分隔的单词。您可以输入每个单词并按 Enter 键，它会突出显示页面中的所有单词。唯一的问题是没有转义 HTML 内容，因此如果您输入任何字符，如 < > class=""strong bold 等...它会将它们保存到 txt 变量中，然后开始在每个循环中为输入中的每个单词乘以 HTML 。我不需要解决该错误，并且我有线索表明它与我的 term 和 txt 变量有关。但也许你能看到一些我看不到的东西。

 var highlightRe = /<span class="highlight">(.*?)<\/span>/g,
             highlightHtml = '<span class="highlight">$1</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,'$1');

///////// 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,'$1');

关于javascript - 如何使用正则表达式清理 HTML 中的 for 循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55272581/

文章推荐：以 * 结尾的 Clojure 方法

文章推荐： jquery - AJAX动态播放列表不会播放歌曲

文章推荐： d3.js - d3 js树布局多个父级

文章推荐： Jquery警报输出问题

grammar - 是否有可能使这个 YACC 语法明确？表达式 : . .. |表达式表达式
我正在用 yacc/bison 编写一个简单的计算器。表达式的语法看起来有点像这样: expr : NUM | expr '+' expr { $$ = $1 + $3; } | expr '-'
java - Lambda 表达式 - 使用 lambda 表达式
我开始学习 lambda 表达式，并在以下情况下遇到了以下语句: interface MyNumber { double getValue(); } MyNumber number; nu
C# Linq Where(表达式).FirstorDefault() 与 .FirstOrDefault(表达式)
这两个 Linq 查询有什么区别: var result = ResultLists().Where( c=> c.code == "abc").FirstOrDefault(); // vs. va
c++ - 为什么在未计算的操作数中不允许使用 lambda 表达式，但在常量表达式的未计算部分中允许使用 lambda 表达式？
如果我们查看 draft C++ standard 5.1.2 Lambda 表达式段 2 说(强调我的 future ): The evaluation of a lambda-expressio
java - -source 1.6 不支持 lambda 表达式 [错误](使用 -source 8 或更高版本启用 lambda 表达式)
我使用的是 Mule 4.2.2 运行时、studio 7.5.1 和 Oracle JDK 1.8.0_251。我在 java 代码中使用 Lambda 表达式，该表达式由 java Invoke
XPath 表达式
我是 XPath 的新手。我有网页的html源 http://london.craigslist.co.uk/com/1233708939.html 现在我想从上面的页面中提取以下数据完整日期电子
boolean 表达式
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭10 年前。 Improve th
Cron 表达式
我将如何编写一个 Cron 表达式以在每天上午 8 点和下午 3:30 触发？我了解如何创建每天触发一次的表达式，而不是在多个设定时间触发。提前致谢最佳答案你应该只使用两行。 0 8 * * *
Java "..."表达式
这个问题已经有答案了: What do 3 dots next to a parameter type mean in Java? (9 个回答) varargs and the '...' argu
python 表达式
我是 python 新手，在阅读 BeautifulSoup 教程时，我不明白这个表达式“[x for x in titles if x.findChildren()][:-1]”我不明白？你能解释一
ruby 表达式
(?:) 这是一个有效的 ruby 正则表达式，谁能告诉我它是什么意思？谢谢最佳答案正如其他人所说，它被用作正则表达式的非捕获语法，但是，它也是正则表达式之外的有效 ruby 语法。在
JavaScript 表达式
这个问题在这里已经有了答案: Why does ++[[]][+[]]+[+[]] return the string "10"? (10 个答案) 关闭 8 年前。谁能帮我处理这个 JavaSc
Java 表达式
这个问题在这里已经有了答案: What is the "-->" operator in C++? (29 个答案) Java: Prefix/postfix of increment/decrem
Python单行 "for"表达式
这个问题在这里已经有了答案: List comprehension vs. lambda + filter (16 个答案) 关闭 10 个月前。我不确定我是否需要 lambda 或其他东西。但是，
C assert() 表达式
C 中的 assert() 函数工作原理对我来说就像一片黑暗的森林。根据这里的答案https://stackoverflow.com/a/1571360 ，您可以使用以下构造将自定义消息输出到您的断言
ada - 类型转换和 if 表达式
在this页，John Barnes 写道: If the conditional expression is the argument of a type conversion then effec
调度程序的 Cron 表达式
我必须创建一个调度程序，它必须每周从第一天上午 9 点到第二天晚上 11 点 59 分运行 2 天(星期四和星期五)。为此，我需要提供一个 cron 表达式。 0-0 0-0 9-23 ? * THU
派生类型列表上的 Linq 表达式
我正在尝试编写一个 Linq 表达式来检查派生类中的属性，但该列表由来自基类的成员组成。下面的示例代码。以“var list”开头的 Process 方法的第二行无法编译，但我不确定应该使用什么语法来
将某些匹配项转换为大写的 Sed 表达式
此 sed 表达式将输入字符串转换为两行输出字符串。两条输出行中的每一行都由输入的子串组成。第一行需要转换成大写: s:random_stuff$choice1\|choice2${\([^}]*
时间范围的 Cron 表达式
我正在使用 Quartz.Net 在我的应用程序中安排我的工作。我只是想知道是否可以为以下场景构建 CRON 表达式: Every second between 2:15AM and 5:20AM 最

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用正则表达式清理 HTML 中的 for 循环？