Question

我目前正在努力使用一个脚本来替换某些文本并通过css将其变为粗体。

但我的问题是，脚本没有循环。它只需要第一个文本。

任何人都可以帮助我吗？

这是我的代码

$(document).ready(function (i) {
$('.main:contains("*")').each(function () {
    $(this).html($(this).html().replace('*', '<span class="highlight">'));
    $(this).html($(this).html().replace('*', '</span>'));
});

}）;

Answer 1

您应该使用带有g标志的正则表达式。类似的东西：

$('.main:contains("*")').html(function (_, html) {
    return html.replace(/\*(\w+)\*/g, "<span class='highlight'>$1</span>");
});

http://jsfiddle.net/az66jzf3/

Answer 2

＆＃13;

$(document).ready(function (i) {
    var $main = $(".main");
    var html = $main.html();
    var matches = html.match(/\*([^*]+)\*/g);
    for (var i=0, l=matches.length; i<l; i++) {
        var rep = "<span class='highlight'>" + matches[i].replace(/\*/g, "") + "</span>";
        html = html.replace(matches[i], rep);
    }
    
    $main.html(html);
});

＆＃13;

span.highlight{font-weight:bold;font-size:30px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
    This is *just* a text.<br/>
    This is just *another* text.
</div>

＆＃13;

Answer 3

这个也可以解决问题：

$(document).ready(function (i) {
    function replace(o) {
        $(o).html($(o).html().replace('*', '<span class="highlight">'));
        $(o).html($(o).html().replace('*', '</span>'));
        if ($(o).html().indexOf("*") >= 0) {
            replace(o);
        }
    }
    replace('.main:contains("*")');

});

Answer 4

您可以按照上述答案进行操作。我的回答主要是解释出了什么问题。当您使用:contains时，您基本上会遍历包含给定文本的所有元素。由于main是唯一匹配字符串'*'的元素，因此循环只运行一次。并且$(this).html()实际上包含整个字符串，因为你使用了两次字符串替换，只有前两个匹配被替换。

Answer 5

你可以用js regex做到这一点。示例：

<!DOCTYPE html>
<html>
<body>
   <button onclick="myFunction()">Try it</button>
   <p id="demo">Please *visit* me *visit* foo</p>

   <script>
      function myFunction() {
         var str = document.getElementById("demo").innerHTML; 
         var txt = str.replace(/\*(.+?)\*/g,"<b>$1</b>");
         document.getElementById("demo").innerHTML = txt;
      }
   </script>
 </body>
 </html>

Answer 6

它不起作用，因为

$('.main:contains("*")')

返回仅包含*一次的html元素。 'replace'只会改变第一场比赛。您的代码中有2个替换，因此它恰好替换了*。

的两个出现

Answer 7

尝试以下 Regex /\*(.+)\*/g：

$(document).ready(function (i) {
        $('.main').html($('.main').html().replace(/\*(.+)\*/g, "<span class=\"highlight\">$1</span>"));
});

span.highlight{font-weight:bold;font-size:30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    This is *just* a text.<br/>
    This is just *another* text.
</div>

它捕获两个*之间的匹配文本，并将其替换为<span>元素所包含的相同捕获文本。

请查看此Regex DEMO以了解有关捕获组匹配的更多信息。

Answer 8

我编辑了小提琴https://jsfiddle.net/pthv/bL3a0svg/3/ 您可以轻松地完成以下操作。

var length = $('.main').html().length;
var check = 0;
var html = $('.main').html();

for (i = length; i >= 0; i--) {
 if (check === 0) {
   html = html.replace('*', '<span class="highlight">');
    check = 1;
 } else {
    html = html.replace('*', '</span>');
    check = 0;
 }
}
$(".main").html(html);

循环文本并用span替换*

8 个答案: