使用 Regex 和 Jquery 替换页内多页

Question

我用字幕文件正则表达式粉碎了部分时间。我想将 html 和 Foreach 添加到所有返回值中。在值中，它将 html 添加到最新的 value.I 希望他添加到所有值。

示例html：

<pre id="subtitle_txt">
1
00:00:00.05 -->; 00:00:03.02
Hello , Users.
2
00:00:03.02 -->; 00:00:05.00
Yep dude, it works successfully!
3
00:00:05.00 -->; 00:00:07.07
Have fun !
</pre>

jquery 个片段：

   $('#subtitle_txt').text(data);
        const regex = /\d+:\d+:\d+.\d+ --> \d+:\d+:\d+.\d\d|[,\/]\d\d/g;
        let m;
        while ((m = regex.exec(data)) !== null) {
            if (m.index === regex.lastIndex) {
                regex.lastIndex++;
            }
            m.forEach((match, groupIndex) => {

                $('#subtitle_txt').html($('#subtitle_txt').text().replace(match, '<x style="color:red">' + match + '</x>'));
                console.log(match);
            });
        }

结果：

我希望这里所有的时间标签都是红色的。

Answer 1

除了一些小问题，例如您的文本包含分号 -->;，所以它不匹配任何内容，问题是这一行：

$('#subtitle_txt').html($('#subtitle_txt').text().replace(

使用 .text() 读取现有值的位置会删除之前添加的任何 html 标签。

您可以将其更改为读取一次/写入一次并且它工作正常：

var data = $('#subtitle_txt').text();
const regex = /\d+:\d+:\d+.\d+ --> \d+:\d+:\d+.\d\d|[,\/]\d\d/g;
let m;
while ((m = regex.exec(data)) !== null) {
  if (m.index === regex.lastIndex) {
    regex.lastIndex++;
  }
  m.forEach((match, groupIndex) => {
    data = data.replace(match, '<x style="color:red">' + match + '</x>');
    console.log(match);
  });
  $("#subtitle_txt").text(data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="subtitle_txt">
1
00:00:00.05 --> 00:00:03.02
Hello , Users.
2
00:00:03.02 --> 00:00:05.00
Yep dude, it works successfully!
3
00:00:05.00 --> 00:00:07.07
Have fun !
</pre>

使用 Regex 和 Jquery 替换页内多页

Replacing in-page multi using Regex and Jquery

html

javascript

jquery

web-frontend