时间戳

首页 > 解决方案 > 当我在javascript中对其执行多个if语句时，字符串不会改变

javascript - 当我在javascript中对其执行多个if语句时，字符串不会改变

问题描述


    let re_alef = /([\u0621-\u064A]ا+)/g;
    let re_ya2 = /([\u0621-\u064A]ي+)/g;
    let re_waw =/([\u0621-\u064A]و+)/g;
    let match =text.match(re);

这是我的变量，我用阿拉伯语做了一些正则表达式，需要从输入中更改文本字母及其颜色

match.forEach(element => {
let el = element.split("");
if(re_alef.test(element) && element.length >3){
        // console.log(element.replace(/([\u0621-\u064A]ا+)/g , '<span class="clr-red">$1</span>'));

        result += element.replace(re_alef , '<span class="clr-red">$1</span>') + ' ' +
        element.replace(re_ya2 , '<span class="clr-red">$1</span>') + ' ';
       }
       else if(re_ya2.test(element) && element.length >3){
        // console.log(element.replace(/([\u0621-\u064A]ا+)/g , '<span class="clr-red">$1</span>'));

        result += element.replace(re_ya2 , '<span class="clr-red">$1</span>') + ' ';
       }
       else if(re_waw.test(element) && element.length >3){
        // console.log(element.replace(/([\u0621-\u064A]ا+)/g , '<span class="clr-red">$1</span>'));

        result += element.replace(re_waw , '<span class="clr-red">$1</span>') + ' ';
       }
       else{
        result += '<span class="clr-black">' + element + ' </span>';
       }
    });

这是我的代码，当我更改字母的颜色时，它会更改，但是当我在 if 语句中已经更改了一个单词时，另一次我想更改它没有更改的颜色，因为它已经通过了 if 语句需要，所以我想在一个声明中加入所有内容。我怎样才能做到这一点？

示例输出：

العالمية

在这个词中，ال 正在着色，这是我想要的，但是当我要求它更改 عا 的颜色时，如果我删除了前面的代码，那么这是正确的，如果

任何帮助将不胜感激！谢谢！

标签： javascriptregex

解决方案

你的正则表达式很好。在替换方面，只需对输入文本进行多次链式替换即可。无需测试字符串长度，如果太短，正则表达式无论如何都会失败。这是一个工作示例：

let text = 'العالمية';
console.log('text:   ' + text);
$('#text').html(text);
let re_alef = /([\u0621-\u064A]ا+)/g;
let re_ya2 = /([\u0621-\u064A]ي+)/g;
let re_waw =/([\u0621-\u064A]و+)/g;
let result = text
  .replace(re_alef , '<span class="clr-red">$1</span>')
  .replace(re_ya2 , '<span class="clr-green">$1</span>')
  .replace(re_waw , '<span class="clr-blue">$1</span>');
console.log('result: ' + result);
$('#result').html(result);
.clr-red {
  color: red;
}
.clr-green {
  color: green;
}
.clr-blue {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text"></div>
<div id="result"></div>

推荐阅读